Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You could always try ditching the while loop, and going with a perpetually recursive function...</p> <p>on the .animate, you could add a timeout function (at whatever interval) that calls the changePic function. As I have no idea what your code looks like, I will provide a fantastically generic outline.</p> <pre><code>/* array of imgUrls */ var imgUrls = new Array(); //populate it however changePic(slideToShowIndex, fadeOutSpeed, fadeInSpeed, slideDelay) { $('#slideHolder').animate({ opacity: 0}, fadeOutSpeed , function(){ $('#slideHolder').attr('src', imgUrls[slideToShowIndex]); $('#slideHolder').animate({ opacity: 1 }, fadeInSpeed, function() { setTimeout(function() { changePic(slideToShowIndex+1, fadeOutSpeed, fadeInSpeed, slideDelay);}, slideDelay}); }); }}); } $(document).ready(function() { changePic(0, 5000, 5000, 10000); }); </code></pre> <p>This should (in theory) fade the image out, swap it with the new one, and fade it in (both taking 5 seconds) and then adding a delay to call itself with the next slide index in 10 seconds.</p> <p>This is in no way perfect, but does outline the general idea. Since we have no idea what your code looks like, I can only assume your setTimeout was in the wrong spot. Doing it like this will make sure that the animation has finished before the timeout is set. This guarantees that the slide wont change until after the animation has changed.</p> <p>of course you could always use a combination of the ':not(:animated)' selector and a setInterval to achieve much the same effect.</p> <p>EDIT: made a slight change to stack the animations properly. The thoery behind this still works even with the OPs addition of code.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload