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

我似乎记得在创建this网站时出现类似问题。

解决方案是使用.hover()和.stop()的组合来确保一次只运行一个动画，我认为你有。还要确保鼠标悬停图像位于另一个图像的顶部，然后将其淡入淡出。淡出的图像会“卡住”，因为在某些不透明度下，.mouseleave()会停止触发，而.mouseenter()会在其他图像上开始触发。

类似的东西：

$$ = $("#image1");
$$.hover(function () {
    $$.stop().animate({
        opacity: 0
    }, 1000);
}, function () {
    $$.stop().animate({
        opacity: 1
    }, 1000);
});

#image1必须高于#image2才能实现此目标，#image1淡出“揭示”#image2背后的内容。该代码使用.animate()而不是.fadeIn()和.fadeOut()，但效果相同。

编辑 - 在fadeoout动画结束后淡入另一个div，使用animate函数的完整回调。

类似的东西：

$$ = $("#image1");
$$.hover(function () {
    $$.stop().animate({
        opacity: 0
    }, 1000);
}, function () {
    $$.stop().animate({
        opacity: 1
    }, 1000, function() {
        $("#finalDiv").animate({ opacity: 1, 500 });
    });
});

#finalDiv需要在html中的<img />s之后显示在它们上方。

Answer 2

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

确保在同一元素（最好是包装元素）上侦听这两个事件。请注意，fadeOut实际上会从呈现的内容中删除元素（display：none），以确保鼠标事件不会在该元素上触发。

旁注：我曾经使用过的一个肮脏的技巧（如果你必须这样做，那么你做错了）就是使用动画函数的回调能力在动画之后清除元素的样式，即。

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

Answer 3

fiddle

您应该使用表单中的动画/转换：

.fadeTo( duration, opacity, complete )

其中complete是回调函数。

jQuery悬停卡住了

3 个答案: