replaceWith (), в то время как элементы fadeOut () и fadeIn () в JQuery

Question

То, что я пытаюсь сделать, это просто затухать все изображения внутри контейнеров, заменить изображение # 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') );

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

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

Answer 1

Я бы посоветовал посмотреть на методы обещания / выполнения в jQuery. В качестве примера здесь вы можете сделать что-то вроде:

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

JQuery обещание - http://api.jquery.com/promise/

Answer 2

Попробуйте:

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

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