Question

希望这是一个简单的请求。我发现这个代码可以完美地用于我想做的事情（在淡入和淡出时旋转列表项）http://jsfiddle.net/gaby/S5Cjm/1/。但是，我希望将鼠标悬停在动画暂停上并在鼠标输出时恢复。我现在是Javascript和JQuery的新手，所以任何帮助都会受到赞赏。

感谢。

编辑：附带问题：使用JQuery执行此操作是否有好处？一个独立的脚本会更合适吗？

Answer 1

我将悬停事件附加到您的列表项。 over函数使用jQuery.stop（true）停止动画和所有后续动画。 out函数恢复动画：

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'));

});

Answer 2

Will this work for you？

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

});

需要帮助暂停/恢复FadeIn和FadeOut

2 个答案: