Showing and hiding multiple divs with jQuery
<p>When a user rolls over a certain <code>&lt;td&gt;</code>, an iframe nested in a <code>&lt;div&gt;</code> slides down inside that <code>&lt;div&gt;</code>. Right now I have three <code>&lt;div&gt;</code>'s stacked on top of each other, and with jQuery I am showing and hiding the appropriate <code>&lt;div&gt;</code>. </p>

<p>It works fine if I let each <code>&lt;div&gt;</code> appear and then move my cursor to the next <code>&lt;td&gt;</code>, but if I move rapidly to each link, they load together and the jQuery does not properly hide the other <code>&lt;div&gt;</code>'s.  </p>

<p>Here is the project site:</p>

<p>Click on "MPC Clients" dropdown, then hover the three links:</p>

<p><a href="http://www.crm-newsletter.com/client-emails/project.html" rel="nofollow">Project Site</a></p>

<p>Here is the jQuery that I'm using:</p>

<pre><code>$("td#version1").hover(function() {
    $("#iframe2,#iframe3").hide();
    $("#iframe1").slideDown("slow");
    $("#iframe2,#iframe3").hide();
});

$("td#version2").hover(function() {
    $("#iframe1,#iframe3").hide();
    $("#iframe2").slideDown("slow");
    $("#iframe1,#iframe3").hide();
});

$("td#version3").hover(function() {
    $("#iframe1,#iframe2").hide();
    $("#iframe3").slideDown("slow");    
    $("#iframe1,#iframe2").hide();
});
</code></pre>

<p>Here's the html with the hidden <code>&lt;div&gt;</code>'s:</p>

<pre><code>&lt;tr&gt;
    &lt;td id="previewWindow0" class="previewWindow" colspan="3"&gt;&lt;h2&gt;Preview Window&lt;/h2&gt;
        &lt;div id="iframe1"&gt;&lt;iframe src="http://www.crm-newsletter.com/client-emails/liveWebinar.html"&gt;&lt;/iframe&gt;&lt;/div&gt;
        &lt;div id="iframe2"&gt;&lt;iframe src="http://www.crm-newsletter.com/client-emails/MissedWebinar.html"&gt;&lt;/iframe&gt;&lt;/div&gt;
        &lt;div id="iframe3"&gt;&lt;iframe src="http://www.crm-newsletter.com/client-emails/Mobile.html"&gt;&lt;/iframe&gt;&lt;/div&gt;
    &lt;/td&gt;
&lt;/tr&gt;
</code></pre>
