如何阻止fadein重复多次悬停

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缓存副本的链接.)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

嗯,我不喜欢停止()那么多,它有点不合适.

你应该在悬停函数的第一个fadeTo之前放置它: .filter(":not(:animated)")