jQuery悬停

Question

当我悬停在一个img上，它会消失到另一个img上，过快地滚开，fadeOut就会被卡住，淡出也会停留。正如我在其他响应中看到的那样，我尝试过.stop()，但仍然无法工作。还有什么可以替代.stop()的东西吗？

<div class="grid big-square">
  <a href="#"><img id="image2" src="img/fade/creo.png">
  <img id="image1" src="img/creo.jpg"></a>
</div>

<script>
$("#image1").mouseenter(function () {
    $(this).stop(true, true).fadeOut(1000);
});

$("#image2").mouseleave(function () {
    $("#image1").stop(true, true).fadeIn(500);
});
</script>

Answer 1

我不知道你是怎么做到的，但我知道该怎么做。试试这个http://jsfiddle.net/xy5dj/

确保侦听同一元素上的两个事件(最好是包装器元素)。请注意，fadeOut实际上从呈现的内容(显示:无)中删除元素，以确保鼠标事件不会触发该元素。

附带注意:我曾经使用过的一个肮脏的技巧(如果您必须这样做，那么您就做错了)是在动画之后使用动画函数的回调功能清除元素的样式，即

$('el').animate({opacity:0}, 500, function(){$(this).attr('style', '')});