Learning jQuery 3 - Fifth Edition

Determining the animation state

One way to avoid the undesirable queuing of animations is to use jQuery's custom :animated selector. Inside the mouseenter/mouseleave event handler, we can use the selector to check the image and see if it is currently being animated:

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

Listing 11.2

When the user's mouse enters the member <div>, the image will only animate if it isn't already being animated. When the mouse leaves, the animation will occur regardless ...