9

問題は、複数のアニメーションを実行しようとすると、それらがすべて同時に発生することです。
コールバックを使用せずにアニメーションを次々と実行する方法はありますか?

これが私がやりたいことです：

$('#a1').click(function() { $('#div1').hide(3000); });
$('#a2').click(function() { $('#div2').hide(3000); });
$('#a3').click(function() { $('#div3').show(3000); });

をクリックしてから をクリックする#a1と、最初のアニメーションが完了する前にすぐに開始するのではなく、アニメーション キューが空になるまで待ってから次のアニメーションを開始します。#a2#a3

たとえば、このデモを見てください

a1その後、次々とクリックして、最初のdivを完全に非表示にし、次に2番目を完全に非表示にしてから、3番目を表示a2できるようにしたいと考えています。a3

私の例は非常に単純で、これはコールバックで実行できますが、実際の問題はできないため、コールバックはオプションではありません。

基本的に、3 つすべてをクリックすると、アニメーションは 9 秒で完了します。

このデモは警告する必要があります ('took around 9 seconds to complete')

4

7 に答える 7

9

.queue()一般的な jQuery オブジェクトで使用します。

var q = $({}); // this could also be a common parent, e.g. $('body')
$('#a1').click(function() {
    q.queue(function(next) {
        $('#div1').hide(3000, next);
    });
    return false;
});
$('#a2').click(function() {
    q.queue(function(next) {
        $('#div2').hide(3000, next);
    });
    return false;
});
$('#a3').click(function() {
    q.queue(function(next) {
        $('#div3').show(3000, next);
    });
    return false;
});​

デモ

于 2012-06-12T18:14:00.303 に答える
3

.promise()を使用してshow、 および のコールバックを回避しますhide。

.promise() メソッドは動的に生成された Promise を返します。この Promise は、コレクションにバインドされた特定のタイプのすべてのアクション (キューに入れられているかどうかに関係なく) が終了すると解決されます。

デフォルトのタイプは「fx」です。これは、選択した要素のすべてのアニメーションが完了すると、返された Promise が解決されることを意味します。

promise ごとに解決されるアニメーションの数を制限するには、.queue()を使用します ( jsFiddleも参照してください)。

var promises = $({});

$('#a1').click(function() {
    promises.queue(function(next) {
        $('div').promise().done(function() {
            $('#div1').hide(3000);
            next();
        });
    });
    return false;
});
$('#a2').click(function() {
    promises.queue(function(next) {
        $('div').promise().done(function() {
            $('#div2').hide(3000);
            next();
        });
    });
    return false;
});
$('#a3').click(function() {
    promises.queue(function(next) {
        $('div').promise().done(function() {
            $('#div3').show(3000);
            next();
        });
    });
    return false;
});
于 2012-06-14T08:54:54.837 に答える
2

キューを使用して配列を作成し、アニメーションのコールバックとして何かが含まれているかどうかを確認し、ある場合は再度実行します。私はあなたの例で少し遊んだ。

見てみな：

http://jsfiddle.net/acrashik/nqh6x/6/

var queue = {
    q: [],
    run: function(elem, type, time, recall) {
        if (queue.isRunning && !recall) {
            console.log('pushed: ' + elem + type + time);            
            queue.q.push({elem:elem, type:type, time:time});
        } else {
            console.log('running:' + elem);
            queue.isRunning = true;
            if (type=='hide') {
                $(elem).hide(time, function(){
                    queue.recall();
                })
            } else {
                $(elem).show(time, function(){
                    queue.recall();
                })             
            }
        }                    
    },
    recall: function(){
        console.log(queue.q.length);                    
        if (queue.q.length > 0) {
            queue.run(queue.q[0].elem, queue.q[0].type, queue.q[0].time, true);
            queue.q = queue.q.splice(1,queue.q.length);
        } else {
            queue.isRunning = false;
            queue.q = [];
        }
    },            
    isRunning: false
}
$('#a1').click(function() { queue.run('#div1','hide',2200) });
$('#a2').click(function() { queue.run('#div2','hide',2200) });
$('#a3').click(function() { queue.run('#div3','show',2200) });
于 2012-06-12T13:18:50.827 に答える
1

animate()アニメーションが終了したときに呼び出される完全な関数が付属しているため、関数を使用しますhttp://api.jquery.com/animate/。

したがって、jQuery doc の例を使用するには:

$('#clickme').click(function() {
  $('#book').animate({
   opacity: 0.25,
   left: '+=50',
   height: 'toggle'
}, 5000, function() {
// Animation complete this is where you call the next animation...
  });
});

function another_animation () {
  $('xyz').animate({
   opacity: 0.25,
   left: '+=50',
}5000, function() {
// Animation complete this is where you call the next animation

私はこれが最もクリーンな方法だと思います...

于 2012-06-18T22:38:47.197 に答える
0

次のようなことができます。

(function(){
    var col=(function(){
        var i=1;
        return function(n){alert("you clicked link nr " + n + ", total clicks: "+i++)};
    })();
    $('#a1').click(function(){col(1)});
    $('#a2').click(function(){col(2)});
    $('#a3').click(function(){col(3)});
})();

私はあなたのためにコード全体を書くつもりはありませんが、それはあなたにそれを行う方法の良いアイデアを与えるはずです. また、変数や関数はグローバルスコープやその他からアクセスできません。

于 2012-06-12T12:39:55.027 に答える
-1

アニメーションの前に stop() を追加します。

$('#a1').click(function() { $('#div1').stop().hide(3000); });
$('#a2').click(function() { $('#div2').stop().hide(3000); });
$('#a3').click(function() { $('#div3').stop().show(3000); });
于 2012-06-03T18:25:34.727 に答える
-2

これを使って $(element).promise().done(function () {...})

あなたの場合

$('#a1').click(function () {
    $('#div1').hide(3000);
});
$('#a2').click(function () {
    $("#div1").promise().done(function () {
        $('#div2').hide(3000);
    });
});
$('#a3').click(function () {
    $("#div2").promise().done(function () {
        $('#div3').hide(3000);
    });
});

次のアニメーションは、選択した要素の前のアニメーションが完了したときにのみ実行されます。

于 2012-06-03T19:01:29.870 に答える