マウスオーバーでjQueryのアニメーションとマウスアウト

Question

に停止し、私はこのコードの6つのボタンがあります。

$('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/