如何暂停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>