Stop slideshow on mouseover

Question

I have a slideshow that shifts between 3 different images that are separated in a DIV tag. I want when you hover the mouse over the slideshow it should stop and when you take the mouse off the slideshow it should continue roll through it.

The code is here:

function slideSwitch() {
    var $active = $('#slideshow3 div.active3');
    if ($active.length == 0 ) $active = $('#slideshow3 div:last');

    var $next = $active.next().length ? $active.next() : $('#slideshow3 div:first');
    $active.addClass('last-active3')
    .animate({opacity : 0.0}, 1000);
    $next.css({opacity: 0.0})
        .addClass('active3')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active3 last-active3');
        });
}

I tried for starters do something like this:

$("#slideshow3").mouseover(function(){
    $(this).stop();
    return false;
});

But the slideshow did not even stop, so I'm definitely not targeting it correctly or putting the code in at the right place.

Can you give me some suggestions ?

Thank you!

Answer 1

You can store your interval reference in a variable, then when you hover the image stop the interval and when you exit start it.

Code:

var theInterval;

function startSlide() {
    theInterval = setInterval(slideSwitch, 5000);
}

function stopSlide() {
    clearInterval(theInterval);
}

$(function () {
    startSlide();
    $('#slideshow DIV').hover(function () {
        stopSlide();
    }, function () {
        startSlide();
    })
});

Demo: http://jsfiddle.net/mucv5/