jQueryで複数のdivを表示/非表示

Question

ユーザーが特定の<td>をロールオーバーすると、<div>にネストされたiframeが<div>の中に入り込みます。今私は3つの<div>がお互いの上に積み重ねられており、jQueryでは適切な<div>を表示して隠しています。

私は、各<div>が表示させた後、次の<td>に私のカーソルを移動する場合、それは正常に動作しますが、私は、各リンクに迅速に移動した場合、彼らは一緒にロードさとjQueryが正常に他の<div>年代を隠していません。

ここ

は、プロジェクトのサイトです： "MPCクライアント" ドロップダウンに

をクリックし、次の3つのリンクホバー：

を：ここではjQueryのは、私が使用しているということです

Project Site

を

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

ここに隠された<div>のhtmlがあります：

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