jQuery动画不同步

jQuery animation out of sync

本文关键字：同步 动画 jQuery      更新时间：2023-09-26

在我的动画开始后不久，它就不同步了。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(); 
});

如果您想要更多的控制，请使用下面的代码。我强烈建议使用添加一个类，然后通过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");
    });
});

如果您只想制作渐变效果，请使用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);
    });
});
相关文章：