仅在悬停时使用 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') 并在 over 上使用 $(this).cycle('resume')。

有什么可以告诉我的。