Изменение изображения Src после анимации в JQuery

Question

Итак, я создаю эффект слайд-шоу поляроида, и я хочу изменить изображение после анимации в JQuery. Я попытался добавить Delays, но, возможно, я не делаю это правильно?

Вот мой код, и, возможно, вы можете помочь найти способ добавить переходные изображения

Jquery

$(function() { // DOCUMENT ready shorthand 
    function polariodSlideshow() { 
     $("#polaroid").animate({ opacity: 1, top: 80 }, 1500); 
     $("#polaroid").animate({ opacity: 0, top: 250 }, 1800); 
     $("#polaroid").animate({ opacity: 0, top: 0 }, 1900, polariodSlideshow); 
    } 
    polariodSlideshow(); 
}); 

HTML

<div id="polaroid" style="position:absolute ;width: 100%; height: -3000px; margin-top: 35px; opacity:0.0"> 
&nbsp;&nbsp;&nbsp; <br /> <br /> 
<div style="background-color: #EEEEEE; height:145%; width:40%; box-shadow: 0px 10px 5px #888888; display:inline-block; margin-left: 15%;"> 

<div id="slideshow"> 
<img id="centerIMG" src="images/cityscape.jpg" style=" margin-top:15px; width: 94%; margin-left:3%;" /> 

</div> 

<div style=""> <br /> <br /> </div> 
</div> 
</div> 

Я ищу добавить переключатель после третьей анимации , поэтому функция обратного вызова будет происходить после изменения изображения при анимации.

Answer 1

Вы просто использовать обработчик завершения из третьей анимации:

$(function() { // DOCUMENT ready shorthand 
    var imgs = ["src1.jpg", "src2.jpg", "src3.jpg", "src4.jpg"]; 
    var cntr = 0; 
    function polariodSlideshow() { 
     $("#polaroid").animate({ opacity: 1, top: 80 }, 1500); 
     $("#polaroid").animate({ opacity: 0, top: 250 }, 1800); 
     $("#polaroid").animate({ opacity: 0, top: 0 }, 1900, function() { 
      // change the image here 
      var newImg = imgs[cntr % imgs.length]; 
      ++cntr; 
      // use newImg here 

      // then kick off the next iteration 
      polariodSlideshow(); 
     }); 
    } 
    polariodSlideshow(); 
}); 

Если новый .src изображение уже не кэшируются, то вам может понадобиться добавить код, который ждет его загрузки или еще лучше , убедитесь, что он заблокирован, так что это не проблема.