jQuery悬停卡住 [英] jQuery hover stuck

问题描述

当我将鼠标悬停在一个会淡入另一个img的img上并过快滚动时，fadeOut会卡住，并且淡化会保持不变.我已经尝试过.stop()，就像在其他响应中看到的那样，但仍然无法正常工作.除了.stop()之外，还有什么我可以放的东西吗?

When I hover over an img which fades to another img and sroll off too fast, the fadeOut gets stuck and the fade stays. I've tried the .stop() as I've seen in other responses, but still won't work. Is there something else I can put instead of the .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>

推荐答案

我似乎记得在创建此网站.

I seem to remember having a similar problem when I was creating this website.

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

The solution is to use a combination of .hover() and .stop() to ensure that only one animation is running at a time, which I think you have. Also ensure that the mouseover image is on top of the other image, and just fade that one in and out. The image fading out gets 'stuck' because at some opacity the .mouseleave() stops firing and the .mouseenter() starts firing on the other image.

类似的东西:

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

#image1必须高于#image2才能起作用，#image1淡出到其后的'reveal'#image2.该代码使用.animate()而不是.fadeIn()和.fadeOut()，但是效果是相同的.

#image1 must be above #image2 for this to work, #image1 fades out to 'reveal' #image2 behind it. The code uses .animate() rather than .fadeIn() and .fadeOut() but the effect is the same.

编辑-要在渐变动画结束后在另一个div中渐变，请使用动画功能的完整回调.

Edit- to fade in another div after the end of the fadeoout animation use the complete call back of the animate function.

类似的东西:

$$ = $("#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之后，才能显示在它们的上方.

#finalDiv needs to be after the 2 <img />s in your html to appear above them.

这篇关于jQuery悬停卡住的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！