How to solve the float issue?

Question

css

There is such a code - a line. If the text is too large, then it is simply hidden.

<li onmouseenter="ShowInfo(this)" onmouseleave="HideInfo(this)">
          <span>Расположение</span><span>TEXT</span></li>
        <li>

Here is the JS code that expands this string to the correct size.

function ShowInfo(e) {
  $(e).animate({
    height: $(e).find("span:last-child").innerHeight()
  }, "normal");
}

function HideInfo(e) {
  $(e).animate({
    height: "25px"
  }, "fast")
}

Works fine. But there is one but. If you point several times with the mouse, Well, that is, as it were, pointed-led. Then she starts to jump (it is understandable, the computer thinks that you pointed, removed, directed, removed, as it should be). So the question is, how can you deal with it? And are there any ways?

Answer 1

Another option is to check if the element is in animation state:
if( $(e).is(':animated') ) {...}
api.jquery.com/animated-selector