jquery每個添加類延遲in

我需要遍歷每個div .row添加或刪除具有CSS3 3D轉換效果的翻轉類。jquery每個添加類延遲in

當我用jquery each（）將這個添加/刪除類應用於每個「.row」時，所有的div都會在同一時間添加或刪除類「.flip」。我需要延遲這個看起來像多米諾骨牌效應。

任何想法如何讓這個工作？或者如何添加/刪除翻轉類一個接一個？

這是我已經找到，但它不工作：

$('.row').each(function(i){ 
    if($(this).hasClass('flip')){ 
     $(this).delay(i*500).removeClass('flip'); 
    }else{ 
     $(this).delay(i*500).addClass('flip'); 
    } 
    });

來源

2012-10-01 Brandon Waring

jQuery的delay()方法只能延緩在使用$(obj).delay(500).addClass('flip');串成方法隊列中下段這不耽誤所有後續行的代碼。（查看first example以及代碼如何並排運行其動畫）

嘗試使用setTimeout()來代替。

$('.row').each(function(i){ 
    var row = $(this); 
    setTimeout(function() { 
    row.toggleClass('flip'); 
    }, 500*i); 
});

Fiddle

來源

2012-10-01 21:01:42 Scrimothy

在這種情況下，你不應該需要'toggleClass'的第二個參數http://jsfiddle.net/xPgJp/2/ –

@Kevin B，這是真的。我想我只是養成了使用第二個參數來處理其他條件的習慣。編輯以反映 – Scrimothy

是的，工作，謝謝。我嘗試添加一個超時，但使用切換。再次感謝！！！ –

你必須使用setTimeout做delay效果。

這裏的jsfiddle：http://jsfiddle.net/xQkmB/1/

var i = 0; 
var rows = $(".row"); 
show(); 

function show() { 
    if (i < rows.length) { 
     $(rows[i]).show(); 
     i++; 
     setTimeout(show, 1000); 
    }  
}

來源

2012-10-01 21:02:49

的addClass功能不是一個動畫功能，所以它不會排隊，所以立即運行，而無需等待.delay()完成。

我使用這個擴展排隊非動畫jQuery的電話：

(function($) { 
    $.fn.queued = function() { 
     var self = this; 
     var func = arguments[0]; 
     var args = [].slice.call(arguments, 1); 
     return this.queue(function() { 
      $.fn[func].apply(self, args).dequeue(); 
     }); 
    } 
}(jQuery));

這在您的代碼會被因此被稱爲：

$('.row').each(function(i){ 
    $(this).delay(i*500).queued('toggleClass', 'flip'); 
}

注：使用toggleClass，而不是有條件的添加/刪除。

來源

2012-10-01 21:05:58 Alnitak

jquery每個添加類延遲in

回答

相關問題