jQuery 动画不同步

Question

我的动画开始后不久，它就不同步了。 div 应该一个接一个地淡入淡出。

请看下面我的代码...

谢谢

(document).ready(function(){ 
    animate_loop = function animate_loop(){
            $( "#w01" ).animate({ opacity: 0.4, }, 1000,
                function(){ $( "#w01").animate({ opacity: 1}, 600)
                animate_loop();
            } );    
    }
   animate_loop(); 

    animate_loop = function animate_loop(){
            $( "#w02" ).animate({ opacity: 0.4, }, 1500,
                function(){ $( "#w02").animate({ opacity: 1}, 600)
                animate_loop();
            } );    
    }
   animate_loop(); 

    animate_loop = function animate_loop(){
            $( "#w03" ).animate({ opacity: 0.4, }, 2000,
                function(){ $( "#w03").animate({ opacity: 1}, 600)
                animate_loop();
            } );    
    }
   animate_loop(); 

    animate_loop = function animate_loop(){
            $( "#w04" ).animate({ opacity: 0.4, }, 2500,
                function(){ $( "#w04").animate({ opacity: 1}, 600)
                animate_loop();
            } );    
    }
   animate_loop(); 
});

Answer 1

如果您只想制作淡入淡出效果，请使用 css 并使用 setInterval 在不同的时间添加 class。使用 .each(index, el) 遍历每个元素。索引将是 1、2、3、4 等...所以用它来延迟你的动画。

这是一个演示：http://jsfiddle.net/mirohristov/gw8kskom/

$(document).ready(function(){ 
    $('.child').each(function(index, el){
        setTimeout(function(){
        $(el).addClass('go');
        }, 200*index);
    });
});

Answer 2

如果您想要更多控制，请使用下面的代码。我强烈建议使用添加 class 然后通过 CSS 设置动画而不是制作 jquery 循环。

这是一个新演示：http://jsfiddle.net/mirohristov/gw8kskom/1/

$(document).ready(function(){ 
    $('#w01').delay(1000).queue(function(){
        $(this).addClass("go");
    });

    $('#w02').delay(1500).queue(function(){
        $(this).addClass("go");
    });

    $('#w03').delay(2000).queue(function(){
        $(this).addClass("go");
    });

    $('#w04').delay(2500).queue(function(){
        $(this).addClass("go");
    });
});

jQuery 动画不同步

jQuery animation out of sync

javascript

jquery

jquery-animate