Question

I’m trying to create a carousel effect that automatically cycles through each pictures every 3 seconds.

    $(".headline_img").each(function(intIndex){
        setTimeout($(this).show(),3000);
    });

The timeout delay is not working.

This shows all of the images instantly as soon as the dom loads. It’s like its ignoring the setTimeout function.

Did I miss something?

Note: I’m calling this using $(document).ready, do you think that might effect it?

Answer 1

The setTimeout function takes a function reference or a string. Your code calls the show method for each element immediately. I’m not sure if this will work:

$(function () {
  var t = 3000, $debug = $('#result');
    $(".headline_img").each(function(){
      var $img = $(this);
        setTimeout($img.show.bind($img), t);
      t += 3000;
    });
});

.headline_img { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="headline_img">One</div>
<div class="headline_img">Two</div>
<div class="headline_img">Three</div>

but it’s worth a try…