Jquery Animate - 使元素反彈一次

Question

我有一個方框.child。當按下鍵時，我想讓這個盒子跳轉，然後回到它的原始位置。我已經得到以下腳本：

$(document).on('keydown', function(e){ 
    if (e.keyCode === 38) { 
     $('.child').animate({ 
      'bottom' : '50px' 
     }, 250).animate({ 
      'bottom' : '0px' 
     }, 250); 
    } 
}); 

現在它確實使按鈕向上按鍵時元素反彈。但是，如果我一直持續按下向上鍵，即使沒有按下鍵，它也會一直跳動。現在我知道了queue，所以我嘗試了以下內容：

$(document).on('keydown', function(e){ 
    if (e.keyCode === 38) { 
     $('.child').animate({ 
      'bottom' : '50px' 
     }, { 
      duration: 250, 
      queue: false 
     }).animate({ 
      'bottom' : '0px' 
     }, { 
      duration: 250, 
      queue: false 
     }); 
    } 
}); 

但隨着預期的要麼沒有工作。然後，我想添加queue : false第二動畫，但仍然沒有奏效。任何人都可以請告訴我如何讓元素跳躍一次而不是重複的跳躍？

小提琴這裏：http://jsfiddle.net/duwtbux0/

Answer 1

只需添加某種標誌即可停止輸入被接受。

var acceptingInput = true; 
$(document).on('keydown', function(e){ 

    if(acceptingInput){ 
     if (e.keyCode === 38) { 
      acceptingInput = false; 
      $('.child').animate({ 
       'bottom' : '50px' 
      }, 250).animate({ 
       'bottom' : '0px' 
      }, 250, function() { 
       acceptingInput = true; 
      }); 
     } 
    } 
}); 

小提琴：http://jsfiddle.net/duwtbux0/2/

Answer 2

如果你想盒子反彈僅onces，您需要解除綁定的文件。該keydown聽衆。

$(document).on('keydown.bounce', function(e){ 
    if (e.keyCode === 38) { 
     $('.child').animate({ 
      'bottom' : '50px' 
     }, 250).animate({ 
      'bottom' : '0px' 
     }, 250); 
     $(document).unbind('.bounce'); 
    } 
}); 

隊列屬性不是爲了做你想做的。該隊列僅用於告訴jquery您是要立即執行動畫還是在最後一個動畫完成後執行動畫。

Answer 3

$(document).on('keydown', function(e){ 
    if($('.child').css('bottom') === '0px'){ 
    if (e.keyCode === 38) { 
     $('.child').animate({ 
      'bottom' : '50px' 
     }, 250).animate({ 
      'bottom' : '0px' 
     }, 250); 
    } 
    } 
}); 

這工作對我很好！

Answer 4

如果你想，這裏是另一種可能性：

$(document).on('keydown', function(e){ 
    if (e.keyCode === 38) { 
     $('.child').stop(1,0).animate({ 
      'bottom' : '50px' 
     }, 250).animate({ 
      'bottom' : '0px' 
     }, 250); 
    } 
}); 

添加.stop(1,0)將保持塊在空氣中，只要你反覆按向上鍵，也將停止排隊。

http://jsfiddle.net/duwtbux0/5/

這可能不是你在找什麼，但它是值得一提。