如何暫停jquery循環插件中間動畫（懸停）

Question

我正在使用jquery循環，並讓它水平不斷滾動。我希望動畫在用戶懸停時停止。通過插件的「暫停：1」選項，我有這種工作排序，但它不會暫停，直到它已經循環到下一個圖像，這是緩慢的。當用戶懸停時，我希望它暫停中間動畫，因此即使在圖像之間的一半，然後繼續在鼠標懸停。這可能嗎？

我的代碼：

$('.gallery .continuous').each(function(index, element) { 
    $(element).cycle({ 
     fx:'scrollHorz',     
     continuous: 1, 
     speed:10000, 
     timeout:0, 
     easing: 'linear', 
     pause:1, 
     pauseOnPagerHover: true, 
    }); 
}); 

感謝您的幫助。

Answer 1

嗨德斯蒙德你可以試試這個在你的JavaScript。把它放在文檔中準備好

$('.gallery .continuous').hover(
function(){ 
$(this).cycle('pause'); //Pauses the cycle on hover 
}, 
function(){ 
$(this).cycle('resume'); // Resumes the cycle when mouse is outside div 
}); 

我希望它能爲你工作。

Answer 2

<div id="slider"> 
     <img class="images" src="1.jpg"> 
     <img class="images" src="2.jpg"> 
     <img class="images" src="3.jpg"> 
     <img class="images" src="4.jpg"> 
    </div> 

<!-- for example above mentioned is your html with container with id "slider" 

then cycle code will be like that --> 


    <script> 
    //this is your cycling code!!!!!!!!!!!!!!! 
     $('#slider').cycle({ 
     fx:  'scrollHorz', 
     timeout: 200, 
     speed: 1000, 
     next: '.right', 
     prev: '.left' 
    }); 

//if you want to pause you need to use .cycle("pause") for e.g: 

//on mouseover. 

     $('#slider').mouseover(function(){ 
      $('#slider').cycle('pause'); 
     }); 


    //and continue on mouse out 

     $('#slider').mouseout(function(){ 
      $('#slider').cycle('resume'); 
     }); 

    </script>