Question

我是jQuery的新手，我需要一些帮助。我正在使用这个jQuery脚本作为见证旋转器，它就像一个魅力，但我只需要做一个小调整。我需要它能够暂停悬停，然后当鼠标离开div时重新启动。我怎么能这样做？

这是我正在使用的脚本：

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

    fadeMyContent();
});

这是JSFiddle。

Answer 1

有一个插件可以提供您需要的所有功能，并且更加可靠，称为jQuery Cycle 2。

初始化时，它会提供“暂停时暂停”选项。

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

如何在悬停时暂停此脚本？

2 个答案: