如何防止jqueryhover事件在未完成时触发？

这是我遇到困难的地方：

$('div.sidebar_content_con').hover(function () { $(this).children('.sidebar_details_container').slideDown(500, function() { $(this).children('.sidebar_details, .sidebar_click').fadeIn(500); }); },function(){ $(this).children('.sidebar_details_container').slideUp(500) $('.sidebar_details, .sidebar_click').fadeOut(500); }); 

问题是多个hover事件可能会在slideDown和fadeIn动画发生时触发。 理想情况下，只有1个hover事件应该触发，如果用户不再盘旋在div.sidebar_content_con上，它应该在那里停止动画。

Answer 1

添加一些stop() s

 $('div.sidebar_content_con').hover(function () { $(this).children('.sidebar_details_container').stop(true, true).slideDown(500, function() { $(this).children('.sidebar_details, .sidebar_click').stop(true, true).fadeIn(500); }); },function(){ $(this).children('.sidebar_details_container').stop(true, true).slideUp(500) $('.sidebar_details, .sidebar_click').stop(true, true).fadeOut(500); }); 

Answer 2

您可以对事件使用stopImmediatePropagation（）以避免冒泡并启动其他事件

 $('div.sidebar_content_con').hover(function (event) { event.stopImmediatePropagation(); $('div.sidebar_content_con').hover(function () { $(this).children('.sidebar_details_container').stop(true, true).slideDown(500, function() 

Answer 3

尝试将.stop（）添加到函数链（http://api.jquery.com/stop/）：

 $（'div.sidebar_content_con'）。hover（function（）{
     $（this）.children（'。sidebar_details_container'）。stop（）。slideDown（500，function（）{
         $（this）.children（'。sidebar_details，.sidebar_click'）。stop（）。fadeIn（500）;   
     }）;

 }，function（）{
     $（本）。儿童（ 'sidebar_details_container'）。停止（）。效果基本show（500）
     $（'。sidebar_details，.sidebar_click'）。stop（）。fadeOut（500）;                                                 
 }）;

Answer 4

您需要使用stop()方法stop()事件的传播。

 $('div.sidebar_content_con').hover(function () { $(this).children('.sidebar_details_container').stop('true, true).slideDown(500, function() { $(this).children('.sidebar_details, .sidebar_click').stop('true, true).fadeIn(500); }); },function(){ $(this).children('.sidebar_details_container').stop('true, true).slideUp(500) $('.sidebar_details, .sidebar_click').stop('true, true).fadeOut(500); });