使用jQuery显示和隐藏多个div

Question

当用户滚过某个<td>时，嵌套在<div>中的iframe在该<div>内滑落。现在我有三个<div>堆叠在一起，并与jQuery我显示并隐藏适当的<div>。

，如果我让每个<div>出现，然后将我的光标移动到下一<td>它工作正常，但如果我迅速移动到每个环节，他们一起加载和jQuery的不能正常隐藏其他<div>的。

这里是项目选址：

点击 “MPC客户” 下拉列表中，然后将鼠标悬停在三个环节：

Project Site

这里是jQuery的，我使用：

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

以下是隐藏的html <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

当您快速移动元素时，会触发多个事件并且动画未完成，因此您看不到预期的行为。

使用stop()方法停止之前的动画，然后再开始下一个动画。

试试这个。

$("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)参考 - http://api.jquery.com/stop/