title: Safari and IE :hover with fadeIn effect bug
body: <p>I'm designing a simple web page and I am using <a href="http://jquery-jkit.com/" rel="nofollow">http://jquery-jkit.com/</a> for my initial fadeIn transitions. I also have a couple of <code>&lt;div&gt;</code> elements, which have a <code>:hover</code> effect that makes them popup and have a small shadow beneath them. </p>
  
  <p>On Chrome everything seems to work well. Whenever the <code>div</code> is in the visible portion of the screen, the class <code>go</code> is added to the element so that the <code>fadeIn</code> animation is triggered. After that whenever I hover on thee element, it pops up as it should.</p>
  
  <p>On other browsers like IE (tested on 11) and Safari (tested on Version 9.0.3 11601.4.4), the initial fadeIn animation is triggered properly, but whenever I hover above the <code>&lt;div&gt;</code> the <code>fadeIn</code> is triggered again and the <code>:hover</code> effect is missing. When I inspect the element and manually remove the <code>fadeIn go</code> classes from <code>&lt;div&gt;</code> the <code>:hover</code> effect works fine.</p>
  
  <p>I have tried removing the <code>fadeIn go</code> classes from the <code>&lt;div&gt;</code> with JavaScript after the animation is done but the moment the class is removed, the animation is triggered one last time. (<code>:hover</code> effect works fine after that).</p>
  
  <p>Anyone has an idea about this?</p>
  
  <p>Thank you in advance! </p>
  
  <p>EDIT:</p>
  
  <p><a href="https://jsfiddle.net/4s39xdyj/3/" rel="nofollow">jsfiddle</a></p>