Question

I am trying to build my own image slideshow, so the code will look into a specific div and if all the images are hidden it should fadeToggle the first image in the div and then re-fires the function again. The problem i am facing is that i check to see if the number of img:hidden is equal img.length inside that div (which is the starting faze), if its true then the code should fadeToggle the first image img:first and it should never run again because the next time this function runs img:hidden != imglength as one of the images is visible. BUT it keeps running. Please look at the code below.

Thanks

<div class="mainSlide">
<img src="img/1.jpg" style="display:none;" />
<img src="img/2.jpg" style="display:none;" />
<img src="img/3.jpg" style="display:none;" />
</div>

<script type="text/javascript">
$(document).ready(function() {

slideShow();

function slideShow() {
    $allSlides = $('div.mainSlide img').length;
    $hiddenSlides = $('div.mainSlide img:hidden').length;

    if ($hiddenSlides == $allSlides) {
        $('div.mainSlide img:first').fadeToggle('slow').delay(5000);
    }
    slideShow();
}

});
</script>

Answer 1

Why not use the the callback?

function slideShow() {
  $allSlides = $('div.mainSlide img').length;
  $hiddenSlides = $('div.mainSlide img:hidden').length;

  if ($hiddenSlides == $allSlides) {
    $('div.mainSlide img:first').fadeToggle('slow', function() {
      slideShow();
    });
  }
}