jquery - 如何停止多次悬停时重复淡入淡出

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)