Подождите анимации в JQuery

Question

Я хочу, чтобы выполнить что-то, когда анимация заканчивается, так что я пытался использовать функцию JQuery в promise(), это то, что у меня есть:

$(".title").fadeOut("fast"); 
$(".title").promise().done(function() { 
    $("#area").fadeIn("fast"); 
); 

К сожалению, это не работает и хром Javascript инструмент говорит, что обещание() не является функцией ...

Другое дело, я попытался было

$(".title").fadeOut("fast", function(){ 
$("#area").fadeIn("fast"); 
}); 

Но это не работает слишком ... какие-либо идеи?

Благодаря

Answer 1

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

Предположим, у вас есть 2 div; один отображается, а другой скрыт в начале, как показано ниже;

<div style="width:50px;height:50px;background-color:black;" id="Div1"></div> 
<div style="width:50px;height:50px;background-color:blue;display:none;" id="Div2"></div> 

Вы можете подождать первый, чтобы затухать, а затем перевести второй код с кодом ниже.

$("#Div1").fadeOut(2000, function(){ 
    $("#Div2").fadeIn(2000); 
}); 

Здесь также JSFiddle образец Jquery Animation Callback

Я надеюсь, что это помогает.

Редактировать: Измененный код для нескольких элементов одного класса. https://jsfiddle.net/eaktas/3wuter03/4/

Answer 2

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

$('#area').fadeOut(3000, function(){console.log('3s passed')}) 

Answer 3

Вам необходимо связать обещание с обратной стороны другой анимации.

$(".title").fadeOut("fast").promise().done(function() { 
    $("#area").fadeIn("fast"); 
}); 

см скрипку здесь https://jsfiddle.net/9b82s6ah/