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

它使你的代碼更清晰。

Answer 2

你需要停止動畫這樣的：

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

Answer 3

這是這方面的完美例子。

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

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