Question

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

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/

由于

Answer 1

添加

obj.stop(true);

以上

animateThis(obj, dist, time);

解决了这个问题。

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

Answer 2

我相信您的问题可能与您在动画完成的回调中重新绑定到mouseenter和mouseleave事件（通过hover()方法）这一事实有关。第一次鼠标悬停时，一个mouseenter事件将触发，下一次将触发，然后是三个等等。这可能会令人震惊，并导致一些非常奇怪的行为。

我建议将事件绑定移出那里，就像这些内容一样：

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

widthDiff = (scrollWrapWidth - obj.width()) * -1;

function resumeAnimation() {
    animateThis(obj.children(".scrollWrapper"), widthDiff, 3000);
};

resumeAnimation();

obj.hover(
        function() {
            obj.children(".scrollWrapper").stop(true, false);
        }, 
        function() {
            resumeAnimation();
        }
    );

JS小提琴：http://jsfiddle.net/YvNR6/12/

动画滑块不会在鼠标离开时继续

2 个答案: