javascript - アニメーションのスライダーがマウスを離しても継続しない

Question

マウスがホバーされていない限り、画像を表示して前後にアニメーション化するアニメーションスライダーを作成しようとしています。マウスホバーで一時停止し、マウスを離す必要があります。私はこれを作成しましたが、マウスが離れたときにいくつかのばかげた問題があり、アニメーションは 1 サイクルしか完了しませんでした。手助け。コードは次のとおりです。

jQuery.fn.makeScroller = function(options){
    var defaults = {  
        hoverStop : true
    };  
    var options = jQuery.extend(defaults, options);

    obj = this;

    var scrollWrapWidth = 0;
    obj.children().each(function(){ scrollWrapWidth += $(this).width(); });

    scrollWrapper = jQuery('<div/>',{class:"scrollWrapper", style:"width:"+scrollWrapWidth+"px"});

    obj.children().wrapAll(scrollWrapper);
    function  animateThis(obj, dist, time){
        obj.animate({marginLeft: dist}, {
            duration:time,
            complete:function(){
                obj.animate({marginLeft: "0"}, {
                    duration:time,
                    complete:function(){
                        animateThis(obj, dist, time);
                    }
                })
            }
        });
        obj.hover(function(){
            obj.stop(true);
        }, function(){
            animateThis(obj, dist, time);
        });
    };

    widthDiff = (scrollWrapWidth - obj.width()) * -1;
    animateThis(obj.children(".scrollWrapper"), widthDiff, 3000);
}
jQuery(document).ready(function(){
    id = ".myScroller";
    jQuery(id).makeScroller();
});

問題を確認するために作成したフィドルへのリンクを次に示します- http://jsfiddle.net/cruising2hell/YvNR6/4/

ありがとう