stop jquery effect when mouse it's stopped

Question

I have an effect start when the image it's hover and slide the different images below, but if i want the effect to stop when the mouse is stopped, what would be the best solution?

here jsfiddle with html - css - jQuery code

this is my example

    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

You can use the 'mousemove' event with jQuery

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

Here 'mousemove' event will trigger only when you are moving your mouse on the image. If you stop moving, no event triggered.

You can check the doc here: https://api.jquery.com/mousemove/

Cheers