Complete function before starting next (fadeIn/fadeOut)
<p><em><strong>UPDATED (see notes at bottom)</em></strong></p>

<p>I have created an image map and when you hover over a specific section of this image map a description will appear in a designated area (the sidebar) of my website.</p>

<p>Each description is of varying length therefore I have not set any maximum height level for my sidebar area so that the display can grow vertically to accomodate each description.</p>

<p>The problem I am having is that when you rapidly hover over areas of the image map the display produces some weird results; showing blocks up content from another hot spot for a split second in full beneath the newly hovered over area and corresponding description (hope that makes sense)</p>

<p>Is there anyway to complete one function in full before displaying the next to avoid this nasty display/animation? </p>

<p>Here is my code:</p>

<pre><code>$(document).ready(function() {
    $("#a-hover").hide();
    $("#a").hover(function() {
        $("#a-hover").fadeIn();
    }).mouseleave(function() {
        $("#a-hover").fadeOut();
    });

    $("#b-hover").hide();
    $("#b").hover(function() {
        $("#b-hover").fadeIn();
    }).mouseleave(function() {
        $("#b-hover").fadeOut();
    }); 

    $("#c-hover").hide();
    $("#c").hover(function() {
        $("#c-hover").fadeIn();
    }).mouseleave(function() {
        $("#c-hover").fadeOut();
    }); 
</code></pre>

<p>And my CSS;</p>

<pre><code>#a-hover,#b-hover,#c-hover {
    z-index: 2;
    float: left;
    position: relative;
}

#a-hover,#b-hover,#c-hover,{
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
    width:326px;
    min-height:603px;
    background-color:#dedddd;
}
</code></pre>

<ul>
<li>I have shortened my code for readability (I have 9 image map hot spots)</li>
<li>I am a novice when it comes to jQuery but I am making a committment to learn so please go easy as my code may not be up to scratch!</li>
<li>I have tried to solve this myself before posting here, but I am out of my depth and need some expert advice</li>
</ul>

<p>I appreciate any responses.</p>

<p>Thank You,</p>

<p>Wp.</p>

<hr>

<p><strong>UPDTAE: I tried the majority of what was provided here as answers and whilst I believe these answers are on the right track I couldn't get the problem to stop however I did notice improvement in the animations overall.</strong></p>

<p><strong>I ended up using a combination .stop(true,true); and **<a href="http://stackoverflow.com/questions/6112660/how-to-resize-automatically-a-font-size-inside-a-div">resize font automatically</a></strong>.</p>

<p><strong>Ultimately not getting the desired result is due to my lack of polish with jQuery but being in a rush I managed to find another way to handle this issue (auto resizable font).**</strong></p>

<p><strong>Thanks to all who took the time out to answer and for those reading this for a similar solution at least know the .stop(true,true); properties did in fact work for me to solve one part of this problem.</strong></p>
