鼠标点击时停止jquery效果's停止

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

这里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);
                 }
             });
     });
 });