Intro/exit animations in show() and hide()
<p>I have this menu with 3 items - only one can be active at a time - which, when clicked, should:</p>

<ol>
<li>play an <strong>exit animation</strong> and <strong>hide</strong> the currently visible correspondent content div - "itemX_mainContent"</li>
<li><strong>show</strong> and play an <strong>intro animation</strong> of it's correspondent content div - "item1_mainContent".</li>
</ol>

<p>Here's the HTML markup:</p>

<pre><code>&lt;div id="menu"&gt;
  &lt;div id="menu_item1" class="menuOption"&gt;
    &lt;p&gt;Item 1&lt;/p&gt;
    &lt;div id="item1_underline" class="menuUnderline"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="menu_item2" class="menuOption"&gt;
    &lt;p&gt;Item 2&lt;/p&gt;
    &lt;div id="item2_underline" class="menuUnderline"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="menu_item3" class="menuOption"&gt;
    &lt;p&gt;Item 3&lt;/p&gt;
    &lt;div id="item3_underline" class="menuUnderline"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt; &lt;!-- End of id="menu" --&gt;

&lt;div id="mainContent"&gt;
  &lt;div id="item1_mainContent" class="zoom_mainContent"&gt;&lt;/div&gt;
  &lt;div id="item2_mainContent" class="zoom_mainContent"&gt;&lt;/div&gt;
  &lt;div id="item3_mainContent" class="zoom_mainContent"&gt;&lt;/div&gt;
&lt;div&gt;
</code></pre>

<p>... and the respective jQuery code:</p>

<pre><code>// Mouseenter events
$('#menu').on('mouseenter', '&gt; div:not(.active)', function(){
  $(this).find('p').animate({'color':'#EF7F1A'}, 250)
         .find('+ .menuUnderline').animate({'background-position-y':'-10px'}, 250);
})

// Mouseleave events
$('#menu').on('mouseleave', '&gt; div:not(.active)', function(){
  $(this).find('p').animate({'color':'#C5C6C6'}, 250)
         .find('+ .menuUnderline').stop(true).animate({'background-position-y':'0px'}, 250);
})

// Click events
$('#menu').on('click', '&gt; div:not(.active)', function(){
// Deactivate currently active menu option
  $('#menu &gt; div.active').removeClass('active').animate({'background-position-y':'-10px'}, 250)
  .find('p').animate({'color':'#EF7F1A'}, 250, function(){
    $(this).animate({'color':'#C5C6C6'});
  })
  .siblings('.menuUnderline').animate({'background-position-y':'0px'}, 250);
// Activate clicked menu option
  $(this).addClass('active').find('p').animate({'color':'#000000'}, 250)
  .find('+ .menuUnderline').animate({'background-position-y':'-22px'}, 250);
});

(function($){
  $('#menu + div').click();
})(jQuery);

// ITEM1 click event
$('#menu_item1').on('click', function(){
  $('#item1_mainContent').show(function(){ item1_intro(); });
//  '#itemX_mainContent' - run exit animation and hide()
});

// ITEM2 click event
$('#menu_item2').on('click', function(){
  $('#item2_mainContent').show(function(){ item2_intro(); });
//  '#itemX_mainContent' - run exit animation and hide()
});

  // ITEM3 click event
$('#menu_item3').on('click', function(){
  $('#item3_mainContent').show(function(){ item3_intro(); });
//  '#itemS_mainContent' - run exit animation and hide()
});
</code></pre>

<p>Well... it doesn't work - don't think it's good coding, either.
I need help fixing the code where the items are clicked - it was supposed to do this:</p>

<p>For ex., clicking Item 1 "#menu_item1"</p>

<ol>
<li>runs <strong>exit animation</strong> of the currently visible "#itemX_mainContent"</li>
<li><strong>hides</strong> div "#itemX_mainContent"</li>
<li><strong>shows</strong> div "#item1_mainContent"</li>
<li>runs <strong>intro animation</strong> of "#item1_mainContent"</li>
</ol>

<p>The functions item1_intro(), item2_intro() and item3_intro() are the intro/exit animations (inside external files). The jQuery code is basically this:</p>

<pre><code>// INTRO ANIMATION EX. ///////////////////////////////////////////////////////////////////////

$(document).ready(function(){

  // Overriding default values for animation purposes
  $('#item1_mainContent').css({'background-color':'#000000', 'opacity':'0', 'left':'-561px'});

  // First part of the intro animation
  function item1_intro01(){
    return $('#item1_mainContent').animate({'opacity':'1', 'left':'0px'}, 1000, 'easeInCirc');
  }

  // Second part of the intro animation
  function item1_intro02(){
    return $('#item1_mainContent').animate({'background-color':'#ff1a00'}, 1000, 'easeInCirc');
  }

  // Complete intro animation
  function item1_intro(){
    $.when(item1_intro01()).done(function(){
      item1_intro02();
    });
  }

});

// EXIT ANIMATION (item1_intro01()) ///////////////////////////////////////////////////////////////////////

$(document).ready(function(){

  // Overriding default values for animation purposes
  $('#item1_mainContent').css({'background-color':'#000000', 'opacity':'0', 'left':'561px'});

  // First part of the intro animation
  function item1_intro01(){
    return $('#item1_mainContent').animate({'opacity':'1', 'left':'0px'}, 1000, 'easeInCirc');
  }

  // Second part of the intro animation
  function item1_intro02(){
    return $('#item1_mainContent').animate({'background-color':'#006e2e'}, 1000, 'easeInCirc');
  }

  // Complete intro animation
  function item1_intro(){
    $.when(item1_intro01()).done(function(){
      item1_intro02();
    });
  }

});
</code></pre>

<p>Here's a <a href="http://jsfiddle.net/FqdMJ/" rel="nofollow">FIDDLE</a>.</p>

<p>Thanx.</p>

<p>Pedro</p>
