Question

var currentImage = 0;
var images = new Array('Aerodynamics.jpg','ABC_news.jpg','yep.jpg'); 
var newImage = 'url(images/'+images[currentImage]+')'; 

function slideSwitch() {
   $('.inner_img').css('background-image',newImage).animate({opacity:1.0},4000).delay(2000)
    .animate({opacity:0.0},4000,function(){
        if(currentImage < images.length-1){
            currentImage++;
        }else{
            currentImage = 0;  
        };
    });
};

第一个动画很好，延迟（）也可以正常工作，不透明度的下一个动画回到0不能正常工作，我的意思是对象还没有消失但它已经触发了回调函数，请告诉我我是做什么的做错了

Answer 1

.animate()是非阻塞的，这意味着链中的下一步（延迟）会立即开始，而不是在动画完成后开始。

使用jQuery 1.5的Deferred objects，您可以通过创建仅在动画完成时解析的Deferred promise来强制对动画进行阻止行为。

我回答了一个昨天完成此问题的问题，请在此处查看我的答案：Mouseover .animate stops prior .animate

Answer 2

您只需要在匿名函数中附加还原动画。

function slideSwitch() {
   $('.inner_img').css('background-image',newImage)
        .animate({opacity:1.0},4000, function() {

           $(this).animate({opacity:0.0},4000,function(){
             if(currentImage < images.length-1){
               currentImage++;
             }else{
               currentImage = 0;  
            });
    });    
};

为什么延迟链函数会导致问题？

2 个答案: