Question

到目前为止，我有fadeIn工作，但fadeOut并不是很正确。现在，只要鼠标离开悬停区域，它就不会发生任何fadeOut。我希望在下一个动画（下一个fadeIn）开始并且不排队之前完成平滑的淡出。基本上这是在<span>标签内的一些链接上。我现在在家里！

P.S。我知道我没有使用.hover。我现在宁愿坚持mouseover和mouseleave，甚至mouseout。请满足这个小要求。

<script>
    $("a").mouseover(function () { 
        $("div").fadeIn(0, function () { 
            $("span").fadeIn(3000,0.0);
        }); 
        return false; 
    });  

    $dequeue;

    $("a").mouseleave(function () { 
        $("span").fadeOut(3000,0.0);
    });
</script>


<!DOCTYPE html>


<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>

<a href="#">MouseOver!</a>

<div>

<h3><span>Sample Text</span></h3>

</div>
</body>
</html>

编辑：08/18/2011

我意识到可能存在与上述脚本冲突的脚本。我在同一页面上运行了一个额外的jquery脚本。它本身工作正常，但当我为文本框添加脚本（上图）时，图像和文本上的.fadeOut将被忽略或至少不一致。

第二个jQuery脚本：

<script>
$(document).ready(function(){

$(".latest_img").fadeTo("slow", 0.0);
$(".latest_img").hover(function(){
$(this).fadeTo(1000, 1.0).dequeue();

},function(){
$(this).fadeTo(1000, 0.0).dequeue();
});
});
</script>

以下是应该提示文本和图像显示的四个“目标”之一的示例（有四个文本框附带四个图像 - 每个图像都通过鼠标悬停在目标上显示）。

HTML：

<div class="gallerycontainer">
<div width="100%" height="30%">

<a class="thumbnail" href="#thumb"><h2 class="ftb" id="tg1">Target A</h2>

<span class="txspan">
<img src="img/ima.jpg" class="latest_img" id="images" />
<h3 class="text"><br>Textbox content for Target A</h3></span></a>

</div>
</div>

Answer 1

没有$dequeue两个事件似乎都在起作用

http://jsfiddle.net/pxfunc/y9qd6/

$("a").mouseover(function() {
    $("div").fadeIn(0, function() {
        $("span").fadeIn(3000, 0.0);
    });
    return false;
});

// remove $dequeue

$("a").mouseleave(function() {
    $("span").fadeOut(3000, 0.0);
});

修改

http://jsfiddle.net/pxfunc/y9qd6/

var $a = $('a'), $div = $('div'), $span = $('span'); $a.mouseover(function() { $div.show(); $span.fadeIn(1000); }).mouseleave(function() { $span.stop(true, true).fadeOut(1000); });

这应该像你正在寻找的那样工作，span在完全消失之前完全淡出。

Answer 2

您不必使用dequeue。请改用stop()：

$("a").mouseover(function () { 
    $("div").fadeIn(0, function () { 
        $("span").fadeIn(3000,0.0);
    }); 
});  

// using ".stop()" will stop the previous animation, and immediatly fade it out

$("a").mouseleave(function () { 
    $("span").stop().fadeOut(3000,0.0);
});

Answer 3

将所有内容放置在文档就绪事件
删除$ dequeue。
在fadeIn和fadeOut的



$(document).ready(function() {
  $("a").mouseover(function () { 
      $("div").stop(true, true).fadeIn(0, function () { 
          $("span").fadeIn(3000,0.0);
      }); 
      return false; 
  });  

  //$dequeue;

  $("a").mouseleave(function () { 
      $("span").stop(true, true).fadeOut(3000,0.0);
  });
});

$(document).ready(function() { $("a").mouseover(function () { $("div").stop(true, true).fadeIn(0, function () { $("span").fadeIn(3000,0.0); }); return false; }); //$dequeue; $("a").mouseleave(function () { $("span").stop(true, true).fadeOut(3000,0.0); }); });

Answer 4

$ dequeue是错误的语法。它必须是$ .dequeue并传递一个元素，即$ .dequeue（elem）。此外，您没有使用队列语句，因此出队是不合适的。 stop（）在两个渐弱都是明智的。无需将任何参数传递给stop（），默认情况下应该可以正常工作。

FireFox 6.0中的jQuery .fadeOut问题

4 个答案: