why delaying chain functions causes problem?

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;  
        };
    });
};

First animation goes fine, delay() works fine too, next animation for opacity back to 0 doesn't works correctly, I mean the object hasn't disappear yet it already开发者_JAVA百科 triggers the callback function, please tell me what am I doing wrong

.animate() is non-blocking, meaning that the next step in your chain (the delay) starts immediately, not after the animation is done.

With jQuery 1.5's Deferred objects, you can force blocking behavior on animations, by creating a Deferred promise which is only resolved when the animation completes.

I answered a question which does exactly this yesterday, see my answer here for an example: Mouseover .animate stops prior .animate

You just need to attach the revert animation in an anonymous function.

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;  
            });
    });    
};