Отображение и скрытие нескольких разделов с помощью jQuery

Question

Когда пользователь перекатывается над определенным <td>, iframe, вложенный в <div>, скользит внутри этого <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> в:

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