title: css jquery animation doesn't run fully - 2 weird bugs
body: <p><strong>FIDDLE</strong><br>
  <a href="http://jsfiddle.net/zuhloobie/t9x723tq/10/" rel="nofollow">http://jsfiddle.net/zuhloobie/t9x723tq/10/</a></p>
  
  <p><strong>GOALS</strong><br>
  (a) flip from blue to gray if entering hover and staying on hover<br>
  (b) flip from gray back to blue if hover is left<br>
  (c) if you enter hover and leave hover really quickly, run the full animation (blue to gray and back to blue)<br></p>
  
  <p>These "sorta" work in my fiddle, but it's buggy...</p>
  
  <p><strong>2 BUGS/QUESTIONS</strong><br>
  (1) If you enter hover from the left side of the div, it flips to back side and stays as intended, but it doesn't finish the animation and flip back to front after leaving hover. <em>How to fix this?</em><br></p>
  
  <p>(2) If you enter hover from the top, right, or bottom of the div, it does not flip to the back side, but it does run the entire animation after leaving hover. <em>How to fix this</em>?</p>
  
  <p><strong>JQUERY</strong><br></p>
  
  <pre><code>$(document).ready(function(){
      $(".bar").hover(function() 
      { 
          $(this).bind("mouseover mouseout transitionend webkitTransitionEnd oTransitionEnd", function() {
              $(this).find(".vFlipper").css({"transition":".4s","transform-style":"preserve-3d","position":"relative"});
              $(this).find(".vertical.vFlip .vFlipper").css({"transform":"rotateX(-180deg)","background-color":"#999999"});
          });
      }, 
      function() 
      { 
          $(this).bind("mouseover mouseout transitionend webkitTransitionEnd oTransitionEnd", function() {
              $(this).find(".vFlipper").css({"transition":".4s","transform-style":"preserve-3d","position":"relative"});
              $(this).find(".vertical.vFlip .vFlipper").css({"transform":"rotateX(0deg)","background-color":"#4FAEDD"});
          });
      }); 
  });
  </code></pre>
  
  <p><strong>CSS</strong><br></p>
  
  <pre><code>#container {width:80%; margin:0 auto;}
  .bar {width:50%; margin:30px auto 0 30px; height:50px}
  .bar ul {list-style:none;}
  .bar &gt; ul &gt; li &gt; a{display:block; padding:10px; text-decoration:none;}
  .bar &gt; ul &gt; li &gt; a:hover {text-decoration:none;}
  .vFlip {perspective:140px; -webkit-perspective:140px; perspective-origin:center; -webkit-perspective-origin:center;}
  .vertical.vFlip {position:relative;}
  .vertical.vFlip .vFlipper {background-color:#4FAEDD;}
  </code></pre>
  
  <p>Thank you for any help.</p>