show fade in and fade out of an array of images simultaneously

Question

JQUERY

  var images=new Array('images/pipe.png','images/pipe1.png','images/pipe2.png');
                        var nextimage=0;

                        doSlideshow();

                        function doSlideshow()
                        {
                            if($('.slideshowimage').length!=0)
                            {

                                $('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
                            }
                            else
                            {
                                 //alert("slide");     
                                slideshowFadeIn();
                            }
                        }
                        function slideshowFadeIn()
                        {
                            $('.leftImage').prepend($('<img class="slideshowimage"     src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1300);}));
                            if(nextimage>=images.length)
                            nextimage=0;
                        }

HTML

 <div class="leftImage">
            <span class="imageTxt">WISHING ALL  EMPLOYEES<br>A HAPPY &AMP; PROSPEROUS <br> NEW YEAR!</span>
       </div>

How to show the fade in and fade out slideshow effect simulataneously, similar to the one in http://www.hdfcbank.com/ Please help

Answer 1

For this, you should use jQuery's queue function:

$('.one').fadeOut(500, queue:false);
$('.two').fadeIn(500, queue:false);

Putting queue:false, jQuery will execute the two function (almost) simultaneously.

In your code, you have:

$('.slideshowimage').fadeOut(500,function({slideshowFadeIn();$(this).remove()});

Here you are queueing:

1. First execute the .fadeOut on .slideshowimage
2. After doing that: fadeIn the new one: ,function({slideshowFadeIn();$(this).remove()}

So you are explicitly queueing the events: the fadeIn will only happen after the fadeOut.

---

To dequeue your code, try this:

// Executing both fadeOut and fadeIn at the same time:
$('.slideshowimage').fadeOut(500, function() { $(this).remove() }); 
slideshowFadeIn();

And substitute it for this line of code in your snippet: $('.slideshowimage').fadeOut(500,function({slideshowFadeIn();$(this).remove()});