JQuery HTML-переход

Question

Я все еще изучаю jQuery, и сейчас я пытаюсь объединить метод html() с переходом (например, hide() и show()), чтобы изменить HTML-код div с помощьюэффект перехода.Вот что я попробовал:

$('div.content_box').hide(1000).html(return_html).show(1000);

Где div.content_box - это div, содержимое / HTML которого необходимо изменить с помощью перехода, а return_html содержит HTML, который был возвращен файлом PHP, который был запрошен через ajax() метод.

Однако это не дает мне желаемого результата.Вместо того, чтобы сначала скрыть div, затем изменить его html и снова показать его, он уже изменил HTML-содержимое div, когда все еще скрывает его.

Кто-нибудь знает, как я могу правильно выполнить эту работу (где действия выполняются в правильном порядке и по одному за раз)?

Answer 1

Есть много способов архивировать то, что вы хотите:

Использование обратного вызова на скрыть : http://jsfiddle.net/VbkNE/

$('div.content_box').hide(1000, function() {
    $(this).html(return_html).show(1000);
});

Использование очереди : http://jsfiddle.net/VbkNE/1/

$('div.content_box').hide(1000).queue(function(next) {
    $(this).html(return_html);
    next();
}).show(1000);

Использование собственного setTimeout : http://jsfiddle.net/VbkNE/2/

$('div.content_box').hide(1000);
setTimeout(function() {
    $('div.content_box').html(return_html).show(1000)
}, 1000);

Использование задержка не работает в вашем случае, цитата из jQuery API - задержка:

Только последующие события в очереди задерживаются; например, это не задержит формы без аргументов .show () или .hide (), которые не используют очередь эффектов.

В этом случае я бы использовал метод обратного вызова - потому что вам не нужно переопределять ваш селектор, как в setTimeout, и вам не нужно сдвигать запас очереди, как в next() в примере очереди, но обратите внимание насколько мощный метод очереди. Ex для цепочки вызовов AJAX.

Answer 2

Используйте jquery delay () в вашей цепочке: http://api.jquery.com/delay/

Я думаю, что использование hide () и show () в одной цепочке не сработает.