CODEWITHSUNDEEP
javascriptjqueryslideronmouseover
Mark89
Mark89

Reputation: 15

Dreamweaver CS6 - How do I stop slider on mouseover?

Below is the jquery code.. I'm wondering how and where exactly in code do I have to enter function, when i go over slider it pause sliding.. And then when I move mouse out of slider, it continues to slide photos..

$(document).ready(function() {

    $('.photo').hover(function() {

        $(this)
            .find('.caption')
            .stop()
            .animate({
                bottom: '0'
            }, {
                duration: 2000,
                easing: 'easeOutQuart'
            });
    }, function() {

        $(this)
            .find('.caption')
            .stop()
            .animate({
                bottom: '-100px'
            }, {
                duration: 2000,
                easing: 'easeOutQuart'
            });

        var interval = setInterval(slideSwitch, 2000);

    });

});

Upvotes: 1

Views: 114

Answers (1)

Krishna Chandran
Krishna Chandran

Reputation: 399

You can use jQuery's hover() function as a shortcut:

$(function() {
    var interval = setInterval( slideSwitch, 10000 );

    $('#slideshow').hover(function() {
        clearInterval(interval);
    }, function() {
        interval = setInterval( slideSwitch, 10000 );
    });
});

Here is a link for a working example.

Upvotes: 1

Related Questions