Jquery幻灯片动画行为

Question

我正在研究一个简单的幻灯片选项卡。

此脚本会导致div - '#slideout'在鼠标位于'＃tabFeature1'上方时滑入，并在mouseout上滑出。

除了不需要的副作用，所有工作都正常。如果效果堆栈 - 所以每个鼠标悬停/鼠标悬停堆叠。例如，如果用户快速地将鼠标移入和移出10次，然后停止移动鼠标，则动画将继续进行10次迭代进出。反过来的效果是动画不会堆叠。请让我知道，如果这是有道理的。

$(document).ready(function() { 
    $('#tabFeature1').mouseover(function() { 
      $('#slideout').show("slide", { direction: "left" }, 1000); 
     }); 

    $('#tabFeature1').mouseout(function() { 
      $('#slideout').hide("slide", { direction: "left" }, 1000); 
    }); 
}); 

Answer 1

检查，看是否动画仍在进行中与.is(':animated')，如果前一个完成应用的动画。

$(document).ready(function() { 
    $('#tabFeature1').mouseover(function() { 
      if (!$('#slideout').is(':animated')) { 
       $('#slideout').show("slide", { direction: "left" }, 1000); 
      } 
     }); 

    $('#tabFeature1').mouseout(function() { 
      if (!$('#slideout').is(':animated')) { 
       $('#slideout').hide("slide", { direction: "left" }, 1000); 
      } 
    }); 
});