photo slideshow problem

I asked you guys before about my custom slideshow code, and you helped me a lot, this time i got different problem. Please point me to the right direction.

Here is a code:

var currentImage = 0;
var images = ['Aerodynamics.jpg','ABC_news.jpg','yep.jpg'];
function slideSwitch() {
    var newImage = 'url(images/'+images[currentImage]+')';
    $('.inner_img').css('background-image',newImage).animate({'opacity':1.0},4000);
    $('.inner_img').doTimeout(10000,function(){
        $(this).animate({'opacity':0.0},4000,function(){
            if (currentImage != images.length-1){
                currentImage++;
            }else{
                currentImage = 0;
            };
        });
    });
};
function interval(){
    setInterval(slideSwitch,4000);
};
interval();

Here is my idea: At first to load 开发者_StackOverflow中文版image #1 with 0 capacity, then animate it to full capacity, then animate it back to 0 capacity with .doTimeout() delay plagin function which works nicely, when animation to 0 capacity done, callback function is suppose to change currentImage value so when interval() will fires slideSwitch() again, it'll have new images with 0 capacity, and the loop continues.

What it does: First loop works nice like I wanted, second loop loads images with 0 capacity from the first loop, then it ignores all the animations and all of a sudden second images appears without animation, and then animations takes place, WTF? Please help, I'm braking my head for days trying to figure it out. Thanks...

As far as I can tell you have overlapping timeouts. Once your interval finished calling slideSwitch, it will wait 4 seconds to fire it again. But once slideSwitch starts, it animates something for 4 seconds, then waits 10 seconds to start another animation which takes 4 seconds, then finally it changes the image. This means that when slideSwitch finishes the first time, setInterval has already triggered itself ~4 times !

Try this code that uses setTimeout. You might need to fix some the delays here and there.

var currentImage = 0;
var images = ['Aerodynamics.jpg','ABC_news.jpg','yep.jpg'];
function slideSwitch() {
    var newImage = 'url(images/'+images[currentImage]+')';
    $('.inner_img').css('background-image',newImage).animate({'opacity':1.0},4000);
    $('.inner_img').doTimeout(10000,function(){
        $(this).animate({'opacity':0.0},4000,function(){
            if (currentImage != images.length-1){
                currentImage++;
            }else{
                currentImage = 0;
            };
            setTimeout(slideSwitch,4000);
        });
    });
};

slideSwitch();