jQuery悬停卡住了

jQuery hover stuck

本文关键字：悬停 jQuery      更新时间：2023-09-26

当我将鼠标悬停在一个淡入另一个 img 的 img 上并且滑落得太快时，淡出会卡住，淡入淡出会停留。我已经尝试了 .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>

我似乎记得在创建这个网站时遇到过类似的问题。

解决方案是使用.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()但效果是相同的。

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

像这样：

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

#finalDiv需要位于 html 中的 2 个<img />s之后才能显示在它们上方。

我不确定您如何实现这一目标，但我知道应该如何完成。试试这个 http://jsfiddle.net/xy5dj/

确保侦听同一元素（最好是包装元素）上的两个事件。请注意，淡出实际上从渲染的内容（显示：无）中删除了该元素，以确保鼠标事件不会在该元素上触发。

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

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

小提琴

您应该在表单中使用动画/过渡：

.fadeTo( duration, opacity, complete )

其中complete是回调函数。

相关文章：