Question

如果我在动画时间（此处为900）鼠标悬停/鼠标移动超过一次。按钮动画不止一次;即使我停止了鼠标活动。

我想要在动画时间只动画一个动画。即使多个事件被触发。其他方式我想说如果我在900期间触发了多个鼠标悬停事件，它会在我触发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");
    });
});

Here's an JSFiddle to show you the behaviour

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");
    });
});

DEMO

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"); 
       });

});

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

3 个答案: