in and out animation per section
<p>this is my first question here and i'll do my best here to explain my issue.</p>

<p>I have a webpage, with 5 sections, lets call them (one, two, tree, four, five) each one, have two functions, the intro and the outro one (introOne, outroOne, introTwo, outroTwo... etc)</p>

<p>My buttons in the HTML:<br></p>

<pre><code>&lt;div class="menu"&gt;
    &lt;a class="one"&gt;&lt;/a&gt;
    &lt;a class="two"&gt;&lt;/a&gt;
    &lt;a class="tree"&gt;&lt;/a&gt;
    &lt;a class="four"&gt;&lt;/a&gt;
    &lt;a class="five"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>The button code:
<br></p>

<pre><code>var sectionFrom = 'one';

    $('.menu a').click(function(){
    var sectionTo = $(this).attr('class');

        if (sectionFrom=='one' &amp;&amp; sectionTo == 'two'){
            outroOne();
                setTimeout(function(){
                introTwo();
            },3000);
        }

        if (sectionFrom=='one' &amp;&amp; sectionTo == 'tree'){
            outroOne();
                setTimeout(function(){
                introTree();
            },3000);
        }

        if (sectionFrom=='one' &amp;&amp; sectionTo == 'four'){
            outroOne();
                setTimeout(function(){
                introFour();
            },3000);
        }
</code></pre>

<p>The idea here is do a transitions, no matter the section you are, that section plays the outro, and the new one comes with and intro, do you know guys how to do this with less code? I have the variables sectionFrom, and sectionTo, any ideas? Thanx a lot for your help!</p>
