title: Stop animation function when another one starts
body: <p>There are two different functions, one for <code>mouseenter</code> and one for <code>mouseleave</code>.</p>
  
  <p>The first one shows the block, the second hides it (both with animation).</p>
  
  <p>The problem is, <code>mouseleave</code> can be started before the animation inside <code>mouseenter</code> finishes.</p>
  
  <p>In this case, the block blinks several times.</p>
  
  <p>I would like to stop any animation inside <code>mouseenter</code> function, when <code>mouseleave</code> starts.</p>
  
  <p>How to do this?</p>