0

私のコードは、status-fade out で始まるクラスを持つ div のセットを作成し、10 を追加してクラスを status-1 から status-11 に変更することになっています。parseint がループしていて、クラスが status-179831、status-179832 になっていることを除いて、すべてが機能しています...

$(function disappear(){
    $('[class^="status-"]').delay(5000).fadeOut(400)
    $('[class^="status-"]').each(function(){
        num = $(this).attr('class').split('status-')[1];
        num = parseInt(num, 10) + 10;
        $(this).attr("class", "status-"+num+"");
    })
    $('[class^="status-"]').delay(1000).fadeIn(400)
    disappear();
})
4

1 に答える 1

1

操作を順番に実行するには、次のようにアニメーションの完了関数を使用する必要があります。

$(function (){

    function runOne(item) {
        item.delay(5000).fadeOut(400, function() {
            var num = item.attr('class').split('status-')[1];
            num = parseInt(num, 10) + 10;
            item.attr("class", "status-"+num+"")
                .delay(1000).fadeIn(400, function() {runOne(item)});
        });
    }

    // start all the animations    
    $('[class^="status-"]').each(function() {
        runOne($(this));
    });
})

実際のデモ: http://jsfiddle.net/jfriend00/k7aS7/

コードが記述されているため、2 つのアニメーションは非同期であり、.each()ループまたは次の呼び出しdisappear()はアニメーションが終了するまで待機しません。このような完了関数を使用すると、アニメーションが完了すると、シーケンスの次の部分がトリガーされます。また、ローカル変数の前で使用していることを常に確認してvar、誤ってグローバル変数にしないようにする必要があります。

すべてのアニメーションが常に各反復で同時に開始されることを保証する promise オブジェクトを同期することもできます。

$(function disappear() {
    var all = $('[class^="status-"]');
    all.delay(5000).fadeOut(400, function() {
        var item = $(this);
        var num = item.attr('class').split('status-')[1];
        num = parseInt(num, 10) + 10;
        item.attr("class", "status-"+num+"")
        item.delay(1000).fadeIn(400);
    })
    // when all animations are done, start the whole process over again
    all.promise().done(disappear);
})

このオプションの動作デモ: http://jsfiddle.net/jfriend00/SY5wr/

各反復後にクラス名を元のクラス名に戻すには、次のようにします。

$(function () {
    // save original class names
    var all = $('[class^="status-"]').each(function() {
        $(this).data("origClassName", this.className);
    });

    function disappear() {
        all.delay(5000).fadeOut(400, function() {
            var item = $(this);
            var num = item.attr('class').split('status-')[1];
            num = parseInt(num, 10) + 10;
            item.attr("class", "status-"+num+"")
            item.delay(1000).fadeIn(400);
        })
        // when all animations are done, start the whole process over again
        all.promise().done(function() {
            // restore class names
            all.each(function() {
                this.className = $(this).data("origClassName");
            })
            // run it all again
            disappear();
        });
    }
    // start it
    disappear();
})

実際のデモ: http://jsfiddle.net/jfriend00/hTmHL/

于 2013-11-09T19:59:23.043 に答える