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

Share Improve this question Follow edited Jan 30, 2014 at 12:57 Vivek Jain 3,88566 gold badges3232 silver badges4747 bronze badges asked Jan 30, 2014 at 10:50 SmalliSaxSmalliSax 34233 gold badges66 silver badges2424 bronze badges 5

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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/