animate after jquery scroll-Collection of common programming errors

11 years ago

admin

1 minute

I’m traying to animate a logo after scrolling animation or when i click any menu link but it’s not working.

I got this code for animate scrolling:

jQuery(function() {
            jQuery('a').bind('click',function(event){
                var $anchor = jQuery(this);

                jQuery('html, body').stop().animate({
                    scrollTop: jQuery($anchor.attr('href')).offset().top
                }, 2000,'easeInOutExpo');

                event.preventDefault();
            });
        });

then, to animate the logo, if the windows position change, i made this:

jQuery(document).ready(function(){
 jQuery(window).bind('scroll',function(){
        var wscroll = jQuery(this).scrollTop();
        if(wscroll > 500){
            jQuery('#logo').delay(800).animate({
                    left:'+48px'
                    });
            }else if(wscroll < 500){
                jQuery('#logo').animate({
                    left:'-250px'
                    });
                }
                console.log(wscroll);
        });

});

Here is the example

But this is not working, not at all.

Some guidance is appreciated. Tks in advance.

Note: console.log will cause the script to crash in Firefox.

Also, the real issue is you need to use .stop() on the animation. It seems to be continually running the animation.

you can use ScrollTo plugin and OnAfter function:

$(...).scrollTo( 'SomeWhere', 1600, {onAfter:function(){ 
   //Your code
} } );

i wrote simple example, maybe will help you. It working for me, but reaction of animation is quite slow … don’t know why :/

http://jsfiddle.net/pVHwY/1/