Question

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

Fiddle: http://jsfiddle.net/camny77/WgRtp/embedded/result/

I just would like to add a feature to STOP onClick

..and then RESUME, onClick.

Answer 1

You could use the clearInterval function to clear the interval, and thus make the animation stop.

Maintain a variable to check the status of the animation, whether it is active or not, and just toggle it when a click event happens.

The following code will make the animation stop when you click, and resume again when you click it.

var _animate  = '';
var active = 1;
function animate() {
    _animate = setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);
}


$("#slideshow").bind(
    'click' , function() {
        if (active === 1) {
            clearInterval(_animate);
            active = 0;
        } else {
            animate();
            active = 1;

        }
    }
);
$("#slideshow > div:gt(0)").hide();
animate();

​I’ve edited your fiddle : http://jsfiddle.net/WgRtp/3/