Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery .animate() stop scrolling when user scrolls manually?

I have set up a snippet that scrolls a page section into view when it's clicked, the problem is that if the user wants to scroll in the middle of the animation the scroll kinda stutters.

    $( "section" ).click(function(e) {         $('html,body').animate({ scrollTop: $(this).position().top }, 'slow');         return false;      }); 

How can I stop the jquery animation if the user scrolls manually?

like image 275
lisovaccaro Avatar asked Aug 26 '13 13:08

lisovaccaro


People also ask

How can you halt animations using jQuery?

The jQuery stop() method is used to stop an animation or effect before it is finished. The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.

What is the use of the animate () method in jQuery?

The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").

What is scroll triggered animation?

Scroll Triggered Animations is a highly customisable, yet user-friendly interface for implementing CSS animations correctly and efficiently throughout your WordPress website. Whether you're a highly-skilled web guru, a content editor or you've got minimal knowledge of web coding, STA makes the animation procedure easy.


1 Answers

Change your function to this:

var page = $("html, body");  $( "section" ).click(function(e) {     page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){        page.stop();    });     page.animate({ scrollTop: $(this).position().top }, 'slow', function(){        page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");    });     return false;  }); 

This will:

  • Stop the animation if the user scrolls manually (only during the animation)
  • Does not obstruct your normal jQuery animation, such some of the other answers would

Some extra information:

Why are you binding to all of those events? "scroll mousewheel etc..."

There are many different types of scroll events. You can scroll down using your mouse, keyboard, touchscreen, etc. With this we make sure to catch all of them.

What is the use of var page = $("html, body");? Can't I just use $("html, body") everywhere?

If you use the same selector more than once, it's good practice to cache them in a variable. It will be easier to write/use, and has better performance than having the program re-calculate the selector every time.

Where can I find more info on .animate() and .stop()?

You can read the jQuery documentation for .animate() and .stop(). I also recommend reading about animation queue's since .stop() works on this principle.

like image 83
Praxis Ashelin Avatar answered Oct 05 '22 16:10

Praxis Ashelin