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'});
        }); 
});

这个小提琴只是我代码中的一小段代码，所以可能会有代码在这里使用。但我会明白这个想法。

由于

Answer 1

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

$('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 2

您可以使用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 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'});
        });
    });
});

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

3 个答案: