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

숨겨진 <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/