How to keep display one Hover at a time?

I have a small hover script and it works like that: When i hover on a link it is fade the relevant div.

Now, i tried to create a second link and configure it to display the second div and i have succeeded, but, when i hover them fast one-after-one it display BOTH faded Divs and stay stuck a while (with 2 divs display instead of 1) until the first div returns.

I want to display only one div at a time when i hover even if i hover fast between links.

Here is the code:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>

<style>
#bank {display:none;}
</style>

<div><a href="#" id="btn">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn-bk">Show back and hid fancy div</a></div><br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>

<script type="text/javascript">
//<![CDATA[

$(window).load(function(){
$('#btn').hover(function(e){    
    $('#fancy').fadeOut('slow', function(){
        $('#bank').fadeIn('slow');
    });
});


$('#btn-bk').hover(function(e){    
    $('#bank').fadeOut('slow', function(){
        $('#fancy').fadeIn('slow');
    });
});
/]]> 
</script>

See it in action: https://jsfiddle.net/rami7250/1jLtxdr7/