Jquery How To Set Interval

Im making slide show with jquery How i can set interval between two function for example: $('#slide').css('background-image', 'url(1.jpg)'); //sleep 5000 ms $('#slide').css('backgr

Solution 1:

var counter= 0,
        imgs = ['1.jpg', '2.jpg'];

$('#slide').css('background-image', 'url('+ imgs[counter] +')');

setInterval(function(){
   counter++;
   if(counter > imgs.length-1) counter = 0;
   $('#slide').css('background-image', 'url('+ imgs[counter] +')');
}, 1000);

Solution 2:

Your code is very unefficient. You get the #slide from the DOM and a line after you need to search again for the #slide element. It's faster to get the element and save it in a var ar something:

$('#slide').css('background-image', 'url(1.jpg)').css('background-image', 'url(2.jpg)');

And a pause can be done by the .delay( time ) method:

$('#slide').css('background-image', 'url(1.jpg)')
           .delay(1000)
           .css('background-image', 'url(2.jpg)'); // 1000 ms = 1 s

---

Thanks to Yoshi, .delay only works with .animate. So I tried it with setTimeout:

var foo = $('#foo')

foo.css('background', '#c33');

setTimeout( function() {
  foo.css('background', '#33c');
}, 2000); // 2000ms = 1s

Live example: http://jsfiddle.net/fmzZ6/