第二列是不褪色的效果连续第二列的

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

您遍历每个。第一列.item和每个动画增加延迟400毫秒。

但是，每次在循环中设置的所有.second-column .item元素都具有相同的动画效果。所以它们在0ms处动画，然后在400ms处调用（除了它们已经淡入），800ms等等。

你需要改变你的循环结构来分别迭代它们中的每一个，或者至少调用animate on第二列.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

未必是最干净的解决方案，但我会离开，你来修复了如果需要的话。