photo slideshow problem
<p>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.</p>

<p>Here is a code:</p>

<pre><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();
</code></pre>

<p>Here is my idea:
At first to load 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.</p>

<p>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... </p>
