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/

谢谢

4

2 回答 2

1

我相信您的问题可能与您重新绑定到mouseenterandmouseleave事件的事实有关（通过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/

于 2013-07-09T09:06:41.170 回答
1

添加一个

obj.stop(true);

以上

animateThis(obj, dist, time);

解决了这个问题。

obj.hover(function(){
        obj.stop(true);
    }, function(){
        obj.stop(true);
        animateThis(obj, dist, time);
    });
于 2013-07-09T08:54:35.387 回答