javascript - JS 関数にバウンス効果を追加する方法

Question

このスライドイン機能に「バウンス」効果を追加するにはどうすればよいですか。

$(window).load(function(){

$('.show').hover(function() {
$('.tool_hover').animate({
    'left':'190px'},
                        'slow');
},function() {
$('.tool_hover').animate({
    'left':'3000px'},
                        'slow');
});

});

そのため、「tool_hover」が 190px へのスライドを完了すると、完全に停止する前に左から右に跳ね返ります。

Answer 1

jQuery イージング プラグインを追加します。

http://gsgd.co.uk/sandbox/jquery/easing/

次に、アニメーション構文に「easeInOutBack」を追加します。次のようになります。

$('.show').hover(function() {
    $('.tool_hover').animate({'left':'190px'}, {left:'easeOutBack'}, 'slow');
},function() {
    $('.tool_hover')$('.tool_hover').animate({'left':'3000px'}, {left:'easeOutBack'}, 'slow');
});

Answer 2

jQuery UI にはバウンス効果があります。

UI/エフェクト/バウンス