8

CSS3 3D 変換効果を持つフリップ クラスを追加または削除するには、各 div .row をループする必要があります。

この追加/削除クラスを jquery each() を使用して各「.row」に適用すると、すべての div でクラス「.flip」がまったく同時に追加または削除されます。ドミノ効果のように見えるように、これを遅らせる必要があります。

どうすればこれを機能させることができますか？または、フリップクラスを1つずつ追加/削除する方法??

これは私が見つけたものですが、機能していません:

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

3 に答える 3

25

jQuerydelay()メソッドは、 を使用して、一連のメソッドのキュー内の次の部分のみを遅延$(obj).delay(500).addClass('flip'); させます。後続のすべてのコード行を遅延させるわけではありません。(最初の例と、コードがアニメーションを並べて実行する方法を確認してください)

setTimeout()代わりに使用してみてください。

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

フィドル

于 2012-10-01T21:01:42.720 に答える
4

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-01T21:02:49.983 に答える
2

関数は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-01T21:05:58.023 に答える