1

私はjQueryが苦手なので、私の仮定が正しいかどうかはわかりません。

私は同位体プラグインを使用しています。これを使用して、要素を 1 つずつ (一度にすべてではなく) 挿入したいので、少し遅れて (人間の目には) そのように見えます。

私が使用するアイソトープを含むアイテムを挿入するには

$('#container').isotope( 'insert', $item);

だから私がやっている一つずつ挿入するために

$("#items_are_here").find('.item').each(function( index ) {
     setTimeout(function() {
            $('#container').isotope( 'insert', $(this));
         },3000);
    });

ただし、これはブラウザが何かを待ってから、それらを一度に表示するようです

私が行った場合

  setTimeout(function() {
   $("#items_are_here").find('.item').each(function( index ) {
          $('#container').isotope( 'insert', $(this));

        }); },3000);

すべてが機能しますが、1つずつではありません..

これはこれを行う正しい方法ですか？または私はそれを過度に複雑にしていますか？

ここにフィドルがあります。その中には、すべてを検索して挿入する 2 つのボタン (すべて.item挿入) があります。そして、提案された方法を遅延して行う1つずつ挿入します。ご覧のとおり、遅延はありません。

4

5 に答える 5

2

エントリごとに非常に瞬時に実行されるため.each()、多かれ少なかれ同じタイムアウトが多数発生します。そのため、約 3 秒後にすべてのタイムアウトが期限切れになり、アイテムが追加されます。

これを防ぐには、アイテムのインデックスに依存するタイムアウトを作成します。したがって、アイテム 0 は 3 秒後に挿入され、アイテム 1 は 6 秒後に挿入されます。

$("#items_are_here").find('.item').each(function( index ) {
  var item = $(this);
  setTimeout(function() {
    $('#container').isotope('insert', item);
  },3000 * (index + 1));
});
于 2013-02-09T09:42:35.917 に答える
1 
$("#items_are_here").find('.item').each(function( index ) {
     setTimeout(function() {
            $('#container').isotope( 'insert', $(this));
         },3000);
    });

上記のコンテキストで$(this)は、 はwindowオブジェクトです。これは の内部にあるためsetTimeoutです。

コードを次のように変更して試してください。

$("#items_are_here").find('.item').each(function( index ) {
     var item = $(this);
     setTimeout(function(index) {
            $("#container").isotope( 'insert', $(this))
     },index*3000);
    });
于 2013-02-09T09:10:35.583 に答える
1 
    var $items=$("#items_are_here").find('.item');
    var i=-1;
    var delayed=setinterval(function() {
            if (++i<$items.length) $('#container').isotope( 'insert', $items.eq(i));
            else clearInterval(delayed); 
             },3000);

未検証。また

    var $container=$('#container');     
    $.fn.extend({
      onebyone :function ($ctnr,i) {
           if (!i) i = 0;
           var $o=$(this);
           setTimeOut(function() {
                 $ctnr.isotope( 'insert', $o.eq(i)); 
                 if (++i<$o.length) $o.onebyone(i); 
               },3000);
           return this; 
      }
    $("#items_are_here").find('.item').onebyone($container);
于 2013-02-09T09:23:40.330 に答える
0 
$("#items_are_here").find('.item').each(function( index ) {
     var item = $(this);
     setTimeout(function(i) {
            $('#container').isotope( 'insert', i );
         },3000);
    });
于 2013-02-09T09:13:12.880 に答える
0

少し遅れましたが、私の回避策は次のとおりでした:to_animateのようなアイテムへのクラスのハードコーディング

CSS:

.item.to_animate { opacity:0; display:block; } @keyframes TransitionClass{ 0% { opacity: 0;transform: scale(1.2); } 100% { opacity: 1;transform: scale(1); } } .animatefinish.TransitionClass{ animation-name: umScaleIn; animation-timing-function: cubic-bezier(0.19,1,.22,1); } .animatefinish.TransitionClass{ animation-duration: .8s; }

同位体の切り取り

    `$('#container').isotope( 'appended', $(el) ).after(function() {

      $('.item.to_animate').each(function(i) {
      var el = $(this);

              setTimeout(function() {

              el.addClass('TransitionClass animatefinish');

                  el.removeClass('to_animate')

              }, i * 200);

      });

    });`
于 2015-06-05T14:12:16.430 に答える