JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nostop">
    <li></li>
    <li></li>
    <li></li>
</ul>

<ul class="stop">
    <li></li>
    <li></li>
    <li></li>
</ul>

Hover madness!

CSS

li{
    width:80px;
    height:40px;
    background:#444;
    margin-bottom:10px;
}

/*.stop li{
    background:#000;
}

JavaScript

//animate with no stop()

$(".nostop li").hover(
  function () {
      $(this).animate({width:"100px"},500);
  },
   function () {
    $(this).animate({width:"80px"},500);
  } 
);

//animate with stop()
$(".stop li").hover(
  function () {
      $(this).stop().animate({width:"100px"},500);
  },
   function () {
    $(this).stop().animate({width:"80px"},500);
  } 
);