Question

我目前有以下代码：

$("ol#homePortfolio li img").fadeTo("slow", 1.0);

$("ol#homePortfolio li img").hover(
    function() {
        $("ol#homePortfolio li img").fadeTo("slow", 0.8); 
    }, 
    function() {
        $("ol#homePortfolio li img").fadeTo("slow", 1.0); 
    }
);

但是，当我将图片悬停在图片上多次fadeIn和fadeOut继续进行时，我该如何应用停止，以便只发生一次？

Answer 1

您可能正在寻找stop功能。（jquery.com今天遇到问题，这里是Google's cached copy的链接。）stop会停止当前正在播放的任何动画。

在开始动画之前调用它，停止该元素上的任何先前动画：

$("ol#homePortfolio li img").stop().fadeTo("slow", 0.8);
//                           ^----

你会想要稍微玩一下（我没有做很多可能重叠的动画），在中间停止一些动画可能意味着你需要确保将元素重置为已知状态。或者，使用jumpToEnd标志：

$("ol#homePortfolio li img").stop(false, true).fadeTo("slow", 0.8);
//                                ^      ^-- true = jump to the end of the animation
//                                |--------- false = don't clear the queue (you may
//                                           want true here, to clear it)

Answer 2

嗯，我不喜欢停止（），这有点低效。

你应该在悬停功能的第一个fadeIn之前放置它： .filter(":not(:animated)")

Answer 3

我用

.stop()

http://api.jquery.com/stop/

Answer 4

我使用了.filter(":not(:animated)")。它适用于我，但.stop()没有。当我使用.stop()多次将鼠标悬停在鼠标上时，链接动画会在fadeIn或fadeOut中间冻结。我建议在这种情况下使用.filter()。

如何阻止fadein重复多次悬停

4 个答案: