在懸停時使用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')。

任何事情都讓我知道。