javascript - 鼠标离开时动画 slider 不继续

Question

我正在尝试创建一个动画 slider ，它显示图像并来回动画，除非鼠标悬停，它会在鼠标悬停时暂停并需要在鼠标离开时继续。我创建了这个但是当鼠标离开时有一些愚蠢的问题，动画只会完成一个周期。一些帮助。这是代码:

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();
});

这是我为您创建的 fiddle 的链接以查看问题 - http://jsfiddle.net/cruising2hell/YvNR6/4/

谢谢

Answer 1

添加一个

obj.stop(true);

以上

animateThis(obj, dist, time);

解决了问题。

obj.hover(function(){
        obj.stop(true);
    }, function(){
        obj.stop(true);
        animateThis(obj, dist, time);
    });