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动画而不是制作一个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");
    });
});

Answer 2

如果您只是想制作淡入淡出效果，请使用css并使用setInterval在不同的时间添加一个类。使用.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);
    });
});

jQuery动画不同步

2 个答案: