title: jQuery Mouse events - how to fire multiple times
body: <p>I am trying to create something my boss like's to call an "interactive infographic" which is pretty much like a quiz.</p>
  
  <p>I was wondering if anyone could tell me how I can get my jQuery events to fire multiple times? Do I need to use a loop? Pretty much I have a mouseenter and mouseleave event but they only fire once.</p>
  
  <p>Also I am having the problem that my h2 elements "jilt down" when the tick appears.</p>
  
  <pre><code>$(document).ready(function () {
  $('.user-answer-a').hide();
  $('.user-answer-b').hide();
  //    slide in from right
  $('.left-side-container h2').addClass('animated slideInRight');
  $('.answer-container h2').addClass('animated slideInRight');
  //    show tick on hover
  $('.right-side-container-top').on('mouseenter', function () {
      $('.user-answer-a').show();
      $('.user-answer-a').addClass('animated zoomIn');
  });
  $('.right-side-container-top').on('mouseleave', function () {
      $('.user-answer-a').show();
      $('.user-answer-a').addClass('animated zoomOut');
  });
  $('.right-side-container-bottom').on('mouseenter', function () {
      $('.user-answer-b').show();
      $('.user-answer-b').addClass('animated zoomIn');
  });
  $('.right-side-container-bottom').on('mouseleave', function () {
      $('.user-answer-b').show();
      $('.user-answer-b').addClass('animated zoomOut');
  });
  });
  </code></pre>
  
  <p>Take a look at my codepen <a href="http://codepen.io/erayner/pen/qReEJm" rel="nofollow noreferrer">here</a></p>
  
  <p>Thanks a bunch!</p>