鼠标悬停时的 Jquery 动画并在鼠标移出时停止

Question

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

$('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);
    }
});

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

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

我该如何解决这个问题？

Answer 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/