How to command if ( ..) don't executive setTimeout()
<p>This <a href="http://jsfiddle.net/58PKb/1/" rel="nofollow">Demo</a>,
After landing page it will show <code>btn2</code>(green area), then user have 2 option:<p>
1. user do nothing - <code>setTimeout()</code><br>
2. user hover to <code>btn2</code>-  show <code>btn3</code>(blue).  <br>
I stuck in 2. after hover to <code>btn2</code> and <code>btn3</code> be show. <code>btn1</code>(red) still fadeIn how to cancel it?</p>

<p>Any suggestion will be appreciated.
<br><br></p>

<pre><code>&lt;div class="btn btn1"&gt;&lt;/div&gt;
&lt;div class="btn btn2"&gt;&lt;/div&gt;
&lt;div class="btn btn3"&gt;&lt;/div&gt;
.btn{
width: 200px;
position: absolute;
}
.btn1{
background-color: red;
height: 100px;
width: 100px;
}
.btn2{
background-color: green;
height: 200px;
opacity: 0.3;
display: none;
}
.btn3{
background-color: blue;
height: 200px;
opacity: 0.3;
display: none;
}
</code></pre>

<p>jQuery</p>

<pre><code>$(function(){
function navctr(){
    //landing
    $('.btn1').hide();
    $('.btn2').show();
    setTimeout(function(){
        $('.btn2').fadeOut(50);
        $('.btn1').fadeIn(50);
    }, 2250);
    //after click
    $('.btn1').click(function(){
        $('.btn1').fadeOut(100);
        $('.btn2').delay(100).fadeIn(50);
    });
    //both
    $('.btn2').hover(function(){
        $('.btn2').hide();
        $('.btn3').fadeIn(100);
    });
    $('.btn3').mouseleave(function(){
        $('.btn3').fadeOut(50);
        $('.btn1').fadeIn(100);
    });
};
navctr();
}); 
</code></pre>
