如何使用 jquery 正确地交叉淡入淡出悬停文本

发布于 2024-11-10 00:14:01 字数 896 浏览 1 评论 0原文

http://jsfiddle.net/mplungjan/8wf5E/ （现在可以使用 - 使用 .hover() ）

当将鼠标悬停在淡入淡出的 div 上时，以下内容显然会失败，因为这会触发鼠标移出和移入。我只需要实际文本淡入和淡出，包装 div 仅用于遏制和调试。首选没有position:absolute的解决方案

<div id="container">
  <div id="one" class="fade">One</div>
  <div id="two" class="fade">Two</div>
</div>   

$(document).ready(function() {
  $("#container").mouseover(function () {
    $("#one").fadeOut("slow");
    $("#two").fadeIn("slow");
  }).mouseout(function () {
    $("#two").fadeOut("slow");
    $("#one").fadeIn("slow");
  });;
}); 

div { margin:3px; width:80px; height:80px; float:left; }
div#container { width: 100px; height:100px; border:1px solid black}
div#one { position:absolute; border:1px solid red;}
div#two { position:absolute; border:1px solid green; display:none; }

原文

http://jsfiddle.net/mplungjan/8wf5E/ (works now - using .hover() )

The following obviously fails when hovering over the fading divs since that triggers the mouseout and in. I only need the actual text to fade in and out, the wrapping divs are only for containment and debugging. A solution without position:absolute is preferred

<div id="container">
  <div id="one" class="fade">One</div>
  <div id="two" class="fade">Two</div>
</div>   

$(document).ready(function() {
  $("#container").mouseover(function () {
    $("#one").fadeOut("slow");
    $("#two").fadeIn("slow");
  }).mouseout(function () {
    $("#two").fadeOut("slow");
    $("#one").fadeIn("slow");
  });;
}); 

div { margin:3px; width:80px; height:80px; float:left; }
div#container { width: 100px; height:100px; border:1px solid black}
div#one { position:absolute; border:1px solid red;}
div#two { position:absolute; border:1px solid green; display:none; }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

关于从前 2024-11-17 00:14:01

我建议使用 hover 函数来实现这种功能...

$(document).ready(function() {
  $("#container").hover(
    function(e) { 
      $("#one").fadeOut("slow");
      $("#two").fadeIn("slow");
    },
    function(e) {
      $("#two").fadeOut("slow");
      $("#one").fadeIn("slow");      
    }
  );
});

它修复了这个特定问题。

I would recommend using the hover function for this kind of functionality...

$(document).ready(function() {
  $("#container").hover(
    function(e) { 
      $("#one").fadeOut("slow");
      $("#two").fadeIn("slow");
    },
    function(e) {
      $("#two").fadeOut("slow");
      $("#one").fadeIn("slow");      
    }
  );
});

It fixes this particular problem.

回复收藏 0 原文

金兰素衣 2024-11-17 00:14:01

使用 mouseleave() 代替 mouseout() 似乎更好。
请参阅此处。

回复收藏 0 原文

记忆之渊 2024-11-17 00:14:01

我想你正在寻找这个 jQuery 代码：

$(document).ready(function() {
  $("#container").mouseenter(function () {
    $("#one").fadeOut("slow");
    $("#two").fadeIn("slow");
  }).mouseleave(function () {
    $("#two").fadeOut("slow");
    $("#one").fadeIn("slow");
  });;
});

编辑：你也可以使用一点 CSS3 魔法来做到这一点;)

div { margin:3px; width:80px; height:80px; float:left; }
div#container { width: 100px; height:100px; border:1px solid black}
div#one { position:absolute; border:1px solid red;-webkit-transition:opacity 0.5s ease-in-out;}
div#two { position:absolute; border:1px solid green; opacity:0;-webkit-transition:opacity 0.5s ease-in-out; }

div#container:hover #two{
 opacity:1;}
div#container:hover #one{
 opacity:0;}

=> http://jsfiddle.net/3WZKx/1/

I think you are looking for this jQuery code :

$(document).ready(function() {
  $("#container").mouseenter(function () {
    $("#one").fadeOut("slow");
    $("#two").fadeIn("slow");
  }).mouseleave(function () {
    $("#two").fadeOut("slow");
    $("#one").fadeIn("slow");
  });;
});

EDIT : You can also do it using a bit of CSS3 magic ;)

div { margin:3px; width:80px; height:80px; float:left; }
div#container { width: 100px; height:100px; border:1px solid black}
div#one { position:absolute; border:1px solid red;-webkit-transition:opacity 0.5s ease-in-out;}
div#two { position:absolute; border:1px solid green; opacity:0;-webkit-transition:opacity 0.5s ease-in-out; }

div#container:hover #two{
 opacity:1;}
div#container:hover #one{
 opacity:0;}

=> http://jsfiddle.net/3WZKx/1/

回复收藏 0 原文

~没有更多了~