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