JQuery Анимация - Создание элемента отскока только один раз

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 ко второй анимации, но все же это не сработало. Может кто-нибудь, пожалуйста, скажите мне, как я могу заставить элемент прыгать один раз вместо повторных прыжков?

Fiddle здесь: 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

Если вы хотите, чтобы сделать сильный удар коробки только унцию, вам нужно отвязать KeyDown слушателя документа.

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

Свойство queue не предназначено, чтобы делать то, что вы хотите. Очередь предназначена только для того, чтобы сообщить 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/

Это может быть не то, что вы ищете, но стоит упомянуть.