jQuery Chaining анимация один за другим

Question

Я использую следующие функции, чтобы вырастить текстовое поле и отобразить кнопку отправки на фокусе и сжать и скрыть кнопку размытия.

Но кнопка показывается и скрывается перед завершением анимации.

Я ищу для создания аккуратного слайд вниз и слайд-анимации.

$('#venue-write-review').focus(function() { 
    $(this).animate({ height: '96px' }, 500); 
    $('#submit-review').show(); 
}); 
$('#venue-write-review').blur(function() { 
    $(this).animate({ height: '48px' }, 500); 
    $('#submit-review').hide(); 
}); 

Answer 1

Это все, что вам нужно _{И не забудьте использовать .stop()!}

$('#venue-write-review').on('focus blur',function(e){ 
    $(this).stop().animate({ height: e.type[0]=="f"?96:48 }, 500, function(){ 
     $('#submit-review').toggle(); 
    }); 
}); 

e.type[0]=="f" IJ просто проверить в условного оператора (:) если первый [0] персонаж прошло мероприятие является f (фокус;? Еще логически это размытость)

Читать jQuery документы о методах: .on(), .toggle(), stop().animate() callback и на MDN сайт прочитал о условного оператора

Также в JQuery, если вам не нужно анимировать с помощью % или какой-либо другой меры, вам не нужно указывать 'px' причина это по умолчанию.

Answer 2

Вы можете использовать обратный вызов complete. Проверьте docs (по опционам раздел):

Функция вызываемая после завершения анимации.

Как это:

$('#venue-write-review').focus(function() { 
    $(this).animate({ 
      height: '96px' 
     }, 
     { 
      duration: 500, 
      complete: function() { 
       $('#submit-review').show(); 
      } 
     } 
    }); 
}); 

$('#venue-write-review').blur(function() { 
    $(this).animate({ 
      height: '48px' 
     }, 
     { 
      duration: 500, 
      complete: function() { 
       $('#submit-review').hide(); 
      } 
     } 
    }); 
}); 

Answer 3

Вы можете задать обратный вызов функции одушевленного будет выполняться после того, как анимация делается.

$('#venue-write-review') 
    .focus(function() { 
     $(this).animate({ height: '96px' }, 500, function() { 
      $('#submit-review').show(); 
     }); 
    }) 
    .blur(function() { 
     $(this).animate({ height: '48px' }, 500, function() { 
      $('#submit-review').hide(); 
     }); 
    });