使用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/