Help needed Pausing/Resuming FadeIn and FadeOut

Hopefully this is a simple request. I found this code that will work perfectly for what I want to do (Rotate through list items while fading in and out) http://jsfiddle.net/gaby/S5Cjm/1/ . However, I am looking to have the animation pause on mouse over and resume on mouse out. I am a novice at the moment with Javascript and JQuery开发者_运维问答, so any help would be appreciated.

Thanks.

EDIT: Side questions: Is there a benefit to using JQuery to do this? Would a stand alone script be more appropriate?

I attached the hover event to your list items. The over function stops the animation and all following animations using jQuery.stop(true). The out function resumes the animation:

http://jsfiddle.net/US4Fc/1/

var duration = 1000
function InOut(elem) {
    elem.delay(duration).fadeIn(duration).delay(duration).fadeOut(

    function() {
        if (elem.next().length > 0) {
            InOut(elem.next());
        }
        else {
            InOut(elem.siblings(':first'));
        }

    });
}

$(function() {
    $('#content li').hide().hover(
        function() {
            $(this).stop(true)
        },
        function() {
            var curOp = Number($(this).css("opacity"));
            $(this).fadeTo(duration*(1-curOp), 1, function() {
                InOut($(this)) 
            });

        }
    );
    InOut($('#content li:first'));

});

Will this work for you?

$(function(){
    var active;
    $('#content li').hide().hover(
        function(){
            active = $(this).stop();
        },
        function(){
            active && InOut(active);
        }
    );
    InOut( $('#content li:first') );

});