Showing and hiding multiple divs with jQuery

Question

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

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

Here is the project site:

Click on "MPC Clients" dropdown, then hover the three links:

Project Site

Here is the jQuery that I'm using:

$("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();
});

Here's the html with the hidden <div> 's:

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

Answer 1

When you move over the elements fast multiple events are fired and animations are not complete so you don't see the expected behavior.

Use stop() method to stop the previous animation before you start the next.

Try this.

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

stop(clearQueue, jumpToEnd) reference - http://api.jquery.com/stop/