鼠标悬停时的 Jquery 动画并在鼠标悬停时停止答案

【问题标题】：Jquery animation on mouseover and stop on mouseout鼠标悬停时的 Jquery 动画并在鼠标悬停时停止
【发布时间】：2012-05-04 17:51:03
【问题描述】：

我有六个带有此代码的按钮：

$('img#b1').on('mouseenter', function() {
    var height = $('div#b1').css('height');
    if(height == '50px'){
        $('div#b1').animate({
        'width' : '1100'
    }, 200);
    }
});
$('img#b1').on('mouseout', function() {
    var height = $('div#b1').css('height');
    if(height == '50px'){
        $('div#b1').animate({
        'width' : '990'
    }, 200);
    }
});

它可以工作，但是如果你快速移动鼠标几次然后将鼠标移出，它会在鼠标移过它的时候恢复动画。

如果鼠标不在动画上，我不想恢复动画。

我该如何解决这个问题？

【问题讨论】：

标签： jquery animation mouseout mouseenter

【解决方案1】：

这是一个完美的例子。

$('img#b1')
  .hover(function() {
    $(this).stop().animate({ width: 1100 }, 'fast');
  }, function() {
    $(this).stop().animate({ width: 990 }, 'fast');
  });

http://css-tricks.com/full-jquery-animations/

【讨论】：

【解决方案2】：

您应该编写如下代码：

$('img#b1').on({
    mouseenter: function() {
        var height = $('div#b1').css('height');
        if(height === '50px'){
            $('div#b1').stop().animate({
                width: 1100
            }, 200);
        }
    },
    mouseout: function() {
        var height = $('div#b1').css('height');
        if(height === '50px'){
            $('div#b1').stop().animate({
                width: 990
            }, 200);
        }
    }
});

它使您的代码更清晰。

【讨论】：

【解决方案3】：

你需要像这样停止动画：

$('img#b1').on('mouseenter', function() {
    var height = $('div#b1').css('height');
    if(height == '50px'){
        $('div#b1').stop().animate({
        'width' : '1100'
    }, 200);
    }
});
$('img#b1').on('mouseout', function() {
    var height = $('div#b1').css('height');
    if(height == '50px'){
        $('div#b1').stop().animate({
        'width' : '990'
    }, 200);
    }
});

【讨论】：