replaceWith() при использовании элементов fadeOut() и fadeIn() в jQuery

#javascript #jquery #jquery-animate #fadein #replacewith

#javascript #jquery #jquery-анимировать #fadein #replacewith

Вопрос:

То, что я пытаюсь сделать, это просто удалить все изображения внутри контейнеров, заменить изображение #next1 на #active и после этого снова удалить все изображения.

вот мой код:

 $('.logo').fadeOut('slow', function() {
    $('#active>img').replaceWith( $('#next1>img') );
}).fadeIn('slow', function() {});
  

это не работает. я обнаружил, что смотрю на пустой #active

но это, однако;

 $('.logo').fadeOut('slow', function() {}).fadeIn('slow', function() {});
$('#active>img').replaceWith( $('#next1>img') );
  

делает замену просто отличной, но не анимацию, которую я пытаюсь сделать.

я получаю одинаковые результаты как с Chrome, так и с ie.

Ответ №1:

Мое предложение здесь состояло бы в том, чтобы посмотреть на методы promise / done в jQuery. В качестве примера здесь вы могли бы сделать что-то вроде:

 $('.logo').fadeOut('slow').promise().done(function(logo) {
    $('#active>img').replaceWith($('#next1>img'));
    $(logo).fadeIn('slow');
});
  

Обещание jQuery — http://api.jquery.com/promise /

Ответ №2:

Попробуйте:

 $('.logo').fadeOut('slow', function() {
    $('#active>img').replaceWith( $('#next1>img') );
    $(this).fadeIn('slow');
});
  

Предполагая, что вы хотите добиться исчезновения, затем замените содержимое, пока .logo оно скрыто, а затем исчезнет после замены логотипа.