title: jQuery events with setTimeout
body: <p>I'm having trouble with jQuery events. What I'm trying to do is when I hover over p element- function fireHover should run, but function fireOver should start running even if first function hasn't finished.</p>
  
  <p>my jQuery:</p>
  
  <pre><code>function fireHover() {
      var eventTimeout;
      clearTimeout(eventTimeout);
  
      $(this).hide();
      $('.opening').removeClass('hidden');
      setTimeout(function () {
          $('.opening').addClass('hidden');
      }, 1000);
      clearTimeout(eventTimeout);
      setTimeout(function () {
          $('.open').removeClass('hidden');
      }, 1000);
      clearTimeout(eventTimeout);
  }
  
  function fireOver() {
      var eventTimeout;
      clearTimeout(eventTimeout);
  
      $(this).addClass('hidden');
      $('.closing').removeClass('hidden');
      setTimeout(function () {
          $('.closing').addClass('hidden');
      }, 1000);
      clearTimeout(eventTimeout);
      setTimeout(function () {
          $('.closed').removeClass('hidden');
          $('.closed').css('display', 'block');
      }, 1000);
      clearTimeout(eventTimeout);
  }
  
  $('.wrap .closed').on('mouseover', fireHover);
  $('.wrap .open').on('mouseleave', fireOver);
  </code></pre>
  
  <p>Here is what I got so far:</p>
  
  <p><a href="http://codepen.io/rolandas/pen/ogpPYR?editors=101" rel="nofollow">http://codepen.io/rolandas/pen/ogpPYR?editors=101</a></p>