如何将多个事件(mouseover/mouseout)添加到一个选择器中

Question

如果我在动画期间mouseover/mouseout非常快地超过一次(在这里900)。按钮是动画不止一次，甚至当我停止鼠标活动。

我希望在动画期间，动画只需要一个事件；即使多个事件被触发。另外，我想说，如果我在900年间触发了多个mouseover事件，它将在触发mouseout时立即终止，反之亦然。

$(document).ready(function () {
    $("button").mouseover(function () {
        $(this).css({
            background: 'transparent',
            color: '#09F'
        });
        $("button").animate({
            width: "110%",
        }, 900);
        $(this).text("Show More >");
    });
    $("button").mouseout(function () {
        $(this).css({
            background: '#09F',
            color: '#FFF'
        });
        $("button").animate({
            width: "100%",
        }, 900);
        $(this).text("Show More");
    });
});

这里有一个JSFiddle来展示你的行为

Answer 1

您需要使用.stop()

停止匹配元素上当前正在运行的动画。

使用

$(document).ready(function () {
    $("button").mouseover(function () {
        $(this).css({
            background: 'transparent',
            color: '#09F'
        });
        $("button").stop().animate({ //Here used stop
            width: "110%",
        }, 900);
        $(this).text("Show More >");
    });
    $("button").mouseout(function () {
        $(this).css({
            background: '#09F',
            color: '#FFF'
        });
        $("button").stop().animate({ //Here used stop
            width: "100%",
        }, 900);
        $(this).text("Show More");
    });
});

演示

Answer 2

是的，每次都是因为你有一定的时间，例如

$('somelemenent').animate({}, 400); 

如果悬停元素比持续时间更快，您的动画将保持有序。对于这种情况，您应该设置：

$('somelement').stop().animate(/* and your properties */);

方法.stop()停止与当前元素连接的所有效果和顺序。

Answer 3

使用此:在完成前一个事件后添加另一个事件。

$(document).ready(function(){
     $("button").mouseover(function() {
          $( this ).css({background :'transparent',color : '#09F'}); 
          $( "button").stop().animate({width: "110%",}, 900 ); 
          $(this).text("Show More >"); 
       }).mouseout(function() { 
           $( this ).css({background :'#09F',color : '#FFF'}); 
           $( "button").stop().animate({width: "100%",}, 900 );
           $(this).text("Show More"); 
       });

});