1

I am trying to create an animated slider that displays images and animates back and forth unless mouse is hovered, it pauses on mouse hover and needs to continue on mouse leave. I created this but having some silly issues when mouse leaves, the animation would only complete one cycle. some help. Here is the code :

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

Here is a link to the fiddle I created for you to see the problem - http://jsfiddle.net/cruising2hell/YvNR6/4/

Thanks

2 Answers 2

1

adding a

obj.stop(true);

above

animateThis(obj, dist, time);

solved the problem.

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

I believe your issue could be related to the fact that you are rebinding to the mouseenter and mouseleave events (via the hover() method) inside of the animation-completed callback. The first time you mouse-over, one mouseenter event will fire, the next time two will, then three, etc. This can be shocking for performance, and cause some very odd behavour.

I would suggest moving the event binding out of there, like something along these lines:

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 Fiddle here: http://jsfiddle.net/YvNR6/12/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.