javascript - 延迟一个接一个地动画 sibling

Question

我正在尝试创建动画功能，我点击让我们说列表中的最后一个 child ， 然后我需要将所有 sibling 一个一个地向左移动。所以它会像波浪一样。

例子: 点击 child nr.4，sibling nr.1 开始向左移出屏幕，并有一个短暂的延迟 sibling 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