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

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  employees<br>a happy &amp; prosperous <br> new year!</span>        </div> 

how show fade in , fade out slideshow effect simulataneously, similar 1 in http://www.hdfcbank.com/ please help

for this, should use jquery's queue function:

$('.one').fadeout(500, queue:false); $('.two').fadein(500, queue:false); 

putting queue:false, jquery execute 2 function (almost) simultaneously.

in code, have:

$('.slideshowimage').fadeout(500,function({slideshowfadein();$(this).remove()}); 

here are queueing:

1. first execute .fadeout on .slideshowimage
2. after doing that: fadein new one: ,function({slideshowfadein();$(this).remove()}

so explicitly queueing events: fadein happen after fadeout.

---

to dequeue code, try this:

// executing both fadeout , fadein @ same time: $('.slideshowimage').fadeout(500, function() { $(this).remove() });  slideshowfadein(); 

and substitute line of code in snippet: $('.slideshowimage').fadeout(500,function({slideshowfadein();$(this).remove()});