在悬停时使用jQuery循环仅

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

});​ 

你需要做的一切都是在使用$(this).cycle('pause')上并$(this).cycle('resume')。

任何事情都让我知道。