鼠标停止时停止jquery效果

Question

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

这里是带有html - css - jQuery代码的jsfiddle

这是我的例子

    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/

干杯