Learning jQuery 3 - Fifth Edition

Halting a running animation

Fortunately, jQuery has a method to help us with both of the problems evident in Listing 11.2. The .stop() method can halt an animation in its tracks. To use it, we can return the code to the way it was in Listing 11.1 and simply insert .stop() between .find() and .animate():

$(() => {  $('div.member')    .on('mouseenter mouseleave', ({ type, currentTarget }) => {      const width = height = type == 'mouseenter' ?        85 : 75;      const paddingTop = paddingLeft = type == 'mouseenter' ?        0 : 5;      $(currentTarget)        .find('img')        .stop()        .animate({          width,          height,          paddingTop,          paddingLeft        });    });});

Listing 11.3

It's worth noting that we stop the current animation before proceeding with the new one. Now when the mouse enters and leaves ...