Question

第二列的项具有相同的顺序，不影响第一列：

var delay = 0;
$('.first-column .item').each(function () {
    $(this).delay(delay).animate({
        opacity: 1,
        'left':'3%'
    }, 500);

  $('.second-column .item').delay(delay).animate({
        opacity: 1,
        'right':'3%'
   }, 500);
    delay += 400;
});

jsfiddle

Answer 1

您正在迭代每个.first-column .item并将每个动画的延迟时间增加400 ms。

但是，每次循环时，您都会在所有.second-column .item元素上设置相同的动画。所以他们在0ms时动画，然后在400ms被调用（除了它们已经消失了），800ms等等。

您需要更改循环结构以分别迭代每个循环结构，或者至少在第一列.item上一次调用第二列.item上的动画。

Answer 2

您循环不正确 - 您必须同时遍历两个列。也许尝试这样的事情：

var delay = 0,
    x = 0;

$(".coluna .item").each(function(){
    $('.first-column .item').eq(x).delay(delay).animate({
        opacity: 1,
        'left':'3%'
    }, 500);
    $('.second-column .item').eq(x).delay(delay).animate({
        opacity: 1,
        'right':'3%'
    }, 500);    
    delay += 400;
    x++
});

jsfiddle

可能不是最干净的解决方案，但如果需要，我会留给你解决。

第二列不是淡化顺序效果

2 个答案: