jQuery делает вещи в порядке

Question

Как я могу заставить вещи работать плавно и в порядке, исходя из моих действий.

т.е.

var $content = $("#content"); 
$content.slideUp().html(''); 
$conten.html(from_my_ajax_request).slideDown(); 

В основном я проделала AJAX запрос, чтобы поместить содержимое сНу #content.

Но запустив выше, я вижу, что код входит, но slideUp не заканчивается до того, как slideDown берет верх. Я, очевидно, хотел бы, чтобы он был гладким.

Надеюсь, вы сможете помочь.

Answer 1

.html() не поставлен в очередь (это происходит немедленно, независимо от времени o е в fx очереди), так что либо использовать .slideUp() обратного вызова, например:

$("#content").slideUp(function() { 
    $(this).html(from_my_ajax_request).slideDown(); 
}); 

Это вызывает .html().slideDown() когда .slideUp() закончена. Или.queue() его, как это:

$("#content").slideUp().queue(function(n) { 
    $(this).html(from_my_ajax_request); n(); 
}).slideDown(); 
//or... 
$("#content").slideUp().queue(function() { 
    $(this).html(from_my_ajax_request).dequeue(); 
}).slideDown(); 

Это фактически ставит .html() вызов в качестве шага fx очереди, и он будет выполнять .slideDown() после его завершения.

Answer 2

var $content = $("#content"); 
$content.slideUp(function() { 
    $content.html(''); 
    $content.html(from_my_ajax_request).slideDown(); 
}); 

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

slideUp docs

Answer 3

Вы можете передать обратный вызов slideUp и получить, чтобы выполнить следующий шаг:

http://api.jquery.com/slideUp/

Или вы могли бы использовать одушевленный вызов:

http://api.jquery.com/animate/