仅在悬停时使用 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

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

您必须使用"暂停"和"恢复"。

示例波纹管：

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

然后，您需要做的就是使用$(this).cycle('pause')，然后$(this).cycle('resume')。

任何事情都让我知道。