javascript - 当鼠标停止时停止jquery效果

Question

当图像悬停并滑动下面的不同图像时，我有一个效果开始，但如果我希望当鼠标停止时效果停止，最好的解决方案是什么？

这里jsfiddle使用 html - css - jQuery 代码

这是我的例子

    jQuery.noConflict()(function($) {

     $(document).ready(function() {
         var timeout;

         var flipImages = function($container) {
             var amount = $container.data("amount");
             var current = $container.data("current");

             if (current >= amount) {
                 current = 1;
             } else {
                 current = current + 1;
             }
             var dataAttr = "image" + current;
             var image = $container.data(dataAttr);
             $container.hide(0, function() {
                 $container.css("background-image", "url(" + image + ")");
                 $container.show(0);
                 $container.data("current", current);
             });
             timeout = setTimeout(function() {
                 flipImages($container);
             }, 1000)
         };

         $(".ct-image").hover(
             function() {
                 var $that = $(this);
                 timeout = setTimeout(function() {
                     flipImages($that);
                 }, 1000)
             },
             function() {
                 if (timeout) {
                     clearTimeout(timeout);
                 }
             });
     });
 });

Answer 1

您可以将“mousemove”事件与 jQuery 结合使用

$('.ct-image').mousemove(function(){
  //your code here
});

这里的“mousemove”事件仅当您在图像上移动鼠标时才会触发。如果您停止移动，则不会触发任何事件。

您可以在此处查看文档:https://api.jquery.com/mousemove/

干杯