javascript - キューイングなしの jQuery アニメーション

Question

.stop() と clearQueue() がどのように機能するかを理解しようとしています。jsfiddle での私のサンプル コードは次のとおりです 。これを回避するために、私は stop() と clearQueue.Simple add stop after hide() または show() を使用しようとしましたが、どちらも機能しません。

1. .stop().hide() : text disappears at last;
2. .stop.show(): text is alway there, won't be hidden any more
3. add both: Same as only add to show()
4. add .clearQueue().stop() in the beginning: text disappears at last, like .stop().hide()

上記の動作を説明するために、clearQueue と stop の違いを理解したいと思います。また、この例でキューに入れずにアニメーションを実現する方法を理解したいと思います。つまり、ブロックにカーソルを合わせると、テキストがスライド効果に表示されます。 .

ありがとう

Answer 1

スライド アニメーションが終了したときに実行されるコールバック関数で、アニメーション キューをクリアする必要があります。

$('.block').hover(function(){
    $('section').hide('fast');
    //$('section').stop().show('slide',{direction:'left'},1000);
    $('section').show('slide',{direction:'left'},1000,function(){$(this).clearQueue()});
},function(){});

jsフィドル

Answer 2

var inAnimation = new Array();

$("div").hover(function(){
    if (!inAnimation[$("div").index(this)] ) {
        $(this).animate({ width: "200px" });
    }
}, function() {
    inAnimation[$("div").index(this)] = true;
    $(this).animate({ width: "100px" }, "normal", "linear", function() {
        inAnimation[$("div").index(this)] = false; 
    })
});