2014-11-19 2 views
1

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> 

Как показывают исчезать и исчезать из слайд-шоу эффект simulataneously, похожий на тот, в http://www.hdfcbank.com/ Пожалуйста, помогите

ответ

1

Для этого вы должны использовать функцию queue jQuery:

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

Ввод queue:false, jQuery будет выполнять две функции (почти) одновременно.

В своем коде, у вас есть:

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

Здесь являются очередями:

  1. Сначала выполните .fadeOut на .slideshowimage
  2. После этого, что: fadeIn новый один: ,function({slideshowFadeIn();$(this).remove()}

Итак, вы явно ставите очередность событий: fadeIn произойдет только послеfadeOut.


Чтобы из очереди кода, попробуйте следующее:

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

И заменить его на эту строку кода в вашем фрагменте кода: $('.slideshowimage').fadeOut(500,function({slideshowFadeIn();$(this).remove()});

+1

Спасибо Жан-Поль заменил строку в моем фрагменте кода и он работает так, как я хотел. – monisha

Смежные вопросы