一个接一个地延迟制作兄弟姐妹的动画

Question

我试图创建一个动画函数，我点击了列表中的最后一个孩子，那么我需要把所有的兄弟姐妹一个接一个地移到左边。所以它会像波浪一样前进。

示例：单击子节点nr.4，同级节点nr.1开始移动到屏幕的左侧，然后有一个短暂的延迟同级节点nr.2等等。所以这就像波浪效应。

我创建了一个JSFiddle：http://jsfiddle.net/10kjn00z/2/

  $('#menu li').click(function(){ 
    setVar(this);
        $(this).siblings().animate({left: '-'+tWidth+'px'}, function() {
            $(this).animate({top: '-'+onSet+'px'});
        }); 
});

这个fiddle只是我代码的一小段，所以这里可能有一些代码没有使用。但我会明白的。

感谢

Answer 1

您可以使用setTimeout()函数来实现您想要的功能。

下面是一个如何做到这一点的例子：

$('#menu li').click(function(){     
    var speed = 100;
    setVar(this);
    var siblings = $(this).siblings();
    $.each( siblings, function(index,value){
        setTimeout(function(){$(value).animate({left: '-'+tWidth+'px'});}, index*speed);
    });
    var current = this;
    setTimeout(function(){$(current).animate({top: '-'+onSet+'px'})}, 400-speed+siblings.length*speed);     
});

在jsFiddle 上查看

Answer 2

如果所有要移位的元素都属于同一个父元素：

$('menu li').click(function(event) {
     var list = event.currentTarget.parentNode.children;
     var i = list.length;
     var timeout = 100
     while (i--) {
         setTimeout(function() {
             $(list[i]).animate(/*logic here*/);
         }, timeout);
         timeout += 100;
     }
})

这将以相反的顺序迭代父对象的所有子对象，并应用动画。您也可以将其调整为只调用某些兄弟姐妹。如果希望它们按顺序迭代，请使用标准的for循环，而不是while。值timeout对应于延迟的毫秒，您可以调整初始值和增量值来调整动画计时。

Answer 3

您可以使用jQuery.fn.delay实现这种行为，其中延迟时间取决于同级列表中的元素位置。

$('#menu li').click(function(){ 
    setVar(this);
    // call .each on siblings, because each will get a different delay
    $(this).siblings().each(function(index, sibl) {
        $(sibl).delay( index * 250 )
               .animate({left: '-'+tWidth+'px'}, function() {
                   $(this).animate({top: '-'+onSet+'px'});
        });
    });
});