1

我不擅长 jQuery，所以我不确定我的假设是否正确。

我正在使用同位素插件，我想用它一个一个地插入元素（而不是一次插入所有元素），并稍有延迟，所以它看起来也像它（对于人眼）

插入一个我用同位素的项目

$('#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);

一切正常，但不是一个接一个..

这是正确的方法吗？还是我过于复杂了？

这是小提琴。在其中，有 2 个按钮 - 全部插入 - 找到所有.item并插入它们。并逐一插入，以延迟执行建议的方式。如您所见，没有延迟。

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 回答