javascript - JQuery が過剰なアニメーション キューを作成する

Question

そこで今日は、マウスをボタンの上に置くとボタンが大きくなり、ボタンからマウスを離すと縮小する簡単なアニメーションを作りたいと思いました。この単純な JQuery コードを使用してみましたが、問題は、アニメーションの速度を遅くすると、ボタンのオンとオフを複数回実行すると、アニメーションの複数のキューが作成され、マウスがボタンから離れた後も長く実行されることです。 .

マウスがボタンから離れた場合、キューを縮小した後にキューを強制終了する方法はありますか? 明らかに、アニメーションを効果的にするためにボタンが縮小した後、キューを強制終了したいと思います。

関連する HTML:

<div id="global-nav">
    <ul id="top-nav">
        <li class="nav-list"><a class="nav" href="http://images6.fanpop.com/image/photos/33400000/Cats-cats-33441067-1280-800.jpg">Link1</a></li>
        |
        <li class="nav-list"><a class="nav" href="http://images4.fanpop.com/image/photos/16100000/-cats-16140154-1920-1080.jpg">Link2</a></li>
        |
        <li class="nav-list"><a class="nav" href="http://learningfromdogs.files.wordpress.com/2010/09/cats-in-sink.jpg">Link3</a></li>
        |
        <li class="nav-list"><a class="nav" href="http://25.media.tumblr.com/55b8c778e82b28aef27be5d6da8eaa7e/tumblr_meysfu2tM91qzv52ko1_500.jpg">Link4</a></li>
    </ul>   
</div>

関連する JavaScript:

$(document).ready(function() {
    $(".nav").mouseover(function() {
        $(this).animate({
            paddingTop:'6px',
            paddingRight:'4px',
            paddingBottom:'6px',
            paddingLeft:'4px'
        },"slow");  
    }).mouseout(function() {
        $(this).animate({
            paddingTop:'3px',
            paddingRight:'2px',
            paddingBottom:'3px',
            paddingLeft:'2px'
        },"slow");
    });
});

JSFiddle: http://jsfiddle.net/76tna/

その他のCSS、猫文字、HTMLはご容赦ください。ナビゲーションバーのボタンについて言及しています。（気になる方は、これは私の妹用です。）

Answer 1

次のアニメーションを開始する前に、現在のアニメーションに移動する必要があり.stop()ます。そうしないと、現在観察しているとおりにキューに入れられます。

Answer 2

このフィドルを試してください

stop関数を使用する必要がありますが、ドキュメントtrueを見ると、デフォルトで false に設定されているため、関数に入力してキューをクリアすることを覚えておく必要があることがわかります。

$(document).ready(function() {
    $(".nav").stop(true).mouseenter(function() {
        $(this).animate({
            paddingTop:'6px',
            paddingRight:'4px',
            paddingBottom:'6px',
            paddingLeft:'4px'
        },"slow");  
    }).mouseout(function() {
        $(this).stop(true).animate({
            paddingTop:'3px',
            paddingRight:'2px',
            paddingBottom:'3px',
            paddingLeft:'2px'
        },"slow");
    });
});

Answer 3

$(document).ready(function() {
    $(".nav").mouseover(function() {
        $(this).css({
            paddingTop:'6px',
            paddingRight:'4px',
            paddingBottom:'6px',
            paddingLeft:'4px',
            transition: 'padding 0.3s ease'            
    }); 
}).mouseout(function() {
    $(this).css({
        paddingTop:'3px',
        paddingRight:'2px',
        paddingBottom:'3px',
        paddingLeft:'2px',
        transition: 'padding 0.3s ease'
    });

});
});