hover - 仅在悬停时使用 jQuery Cycle

Question

我试图让 jQuery Cycle 仅在幻灯片悬停时运行(这与它们内置的功能相反)。

这是我所在的位置:http://jsfiddle.net/zSBMU/

$(document).ready(function() {

$('.slideshow').hover(
    function() {
        $(this).cycle({
            fx:     'fade',
            speed:   600,
            timeout: 300,
            pause:   0
        });
    },
    function(){
        $(this).cycle('stop');
    }
).trigger('hover');

​ });

第一次悬停时，效果很好，运行良好。但是，如果您尝试再次将鼠标悬停在同一个上，它只会经历一次淡入淡出，而不是再次循环。

有什么想法吗？

请忽略一些粗略的代码，在这里使用一个相当旧的主题，尝试清理它!

Answer 1

您正在使用“停止”并重新创建循环，因此您在对象上添加了多个循环。

您必须使用“暂停”和“恢复”。

示例如下:

var cycleConfigured = false;
$(document).ready(function() {

    $('.slideshow').hover(
        function() {
            if(cycleConfigured)
                $(this).cycle('resume');
            else
            {
                $(this).cycle({
                    fx:     'fade',
                    speed:   600,
                    timeout: 300,
                    pause:   0
                });
                cycleConfigured = true;
            }
        },
        function(){
            $(this).cycle('pause');
        }
    ).trigger('hover');

});​

变量cycleConfigured将用于控制我们的循环插件，以检查它是否已经实例化。 或者，您可以在 $(document).ready() 上创建它，然后像这样暂停它:

$(document).ready(function() {
    // configure the cycle plugin
    $('.slideshow').cycle({
         fx:     'fade',
         speed:   600,
         timeout: 300,
         pause:   0
    });
    $('.slideshow').cycle('pause'); // pause it right away.

    $('.slideshow').hover(
        function() {
                $(this).cycle('resume'); // start playing.
        },
        function(){
            $(this).cycle('pause'); // pause the slideshow.
        }
    ).trigger('hover');

});​

然后您需要做的就是在 out 上使用 $(this).cycle('pause') 和 $(this).cycle('resume')就结束了。

有什么事情请告诉我。