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!

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!

• javascript
• jquery
• html
• mouseover

• use queue and clearQueue instead of stop – Bhojendra Rauniyar Commented Jan 30, 2014 at 10:57
• 2 Can you please share a fiddle? – Vinoth Commented Jan 30, 2014 at 10:57
• where are you calling this function ? slideSwitch ? – Yves Lange Commented Jan 30, 2014 at 11:07
• I'm sorry I forgot to include the calling, but I call it just below as: $(function(){ setInterval("slideSwitch()", 3000 ); – SmalliSax Commented Jan 30, 2014 at 11:38
• Here is the fiddle: jsfiddle/F86jv I dont get why it doesn't run though, it looks more or less the same as mine beside the images. – SmalliSax Commented Jan 30, 2014 at 11:47

1 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/mucv5/