How to pause a script when it hangs?

Question

I am new to jQuery and I need help. I use this jQuery script as a replicator roller, and it works like a charm, but I just need to do a little tweaking. I need it so that it can pause hovering and then restart when the mouse leaves the div. How can i do this?

This is the script I use:

function fadeMyContent() {
    $(".testimonial:first").fadeIn(1000).delay(3000).fadeOut(1000,
        function() {    
            $(this).appendTo($(this).parent());   
            fadeMyContent();    
        });
    }

    fadeMyContent();
});

Here is the JSFiddle .

Answer 1

There is a plugin that will provide all the functions you need and will be more reliably named jQuery Cycle 2 .

At initialization, it provides the option "pause on hang."

Answer 2

fadeMyContent ( ) ul#testimonial-rotator "" . setTimeout delay, .

$(document).ready(function () {
var fadeMyContent;
var t
fadeMyContent = function () {

    $(".rotate:first").fadeIn(1000)
    t = setTimeout(function () {
        $(".rotate:first").fadeOut(1000,

        function () {
            $(this).appendTo($(this).parent());
            fadeMyContent();
        });
    }, 3000)
}

var fadeMyContentDummy = function () {

    $(".rotate:first").fadeOut(1000,

    function () {
        $(this).appendTo($(this).parent());
        fadeMyContent()
    });
}


fadeMyContent();

$('#testimonial-rotator').hover(function (e)

{
    window.clearTimeout(t)
    $('.rotate:first').clearQueue()

    fadeMyContent = function () {

        return false;
    }

},

function (e)

{

    fadeMyContent = function () {

        $(".rotate:first").fadeIn(1000)
        t = setTimeout(function () {
            $(".rotate:first").fadeOut(1000,

            function () {
                $(this).appendTo($(this).parent());
                fadeMyContent();
            });
        }, 3000)
    }

    fadeMyContentDummy()

})


});

DEMO