jQuery - правильный способ ожидания окончания фейдера

Question

У меня проблема с тем, что я хочу затемнить изображение, а затем переместить изображение в пустой контейнер <li>.Тем не менее, изображение не исчезает, вместо этого просто кажется, что исчезновение переопределяется с помощью html().

Ниже я пытаюсь сделать следующее.Есть ли способ заставить движение ждать завершения фейдера?

// Fade out image to be replaced
mosaic_box.find('img').fadeTo(7000, 0.0)

// Then move the image
$('.mosaic_list li:empty', obj)
    .random(1)
    .html(mosaic_box.find('img')
        .addClass('mosaic_last_img')
    );

Answer 1

Перемещение в обратном вызове из функции fadeTo:

mosaic_box.find('img').fadeTo(7000, 0.0, function() { 
    $('.mosaic_list li:empty', obj)
     .random(1)
     .html(mosaic_box.find('img').addClass('mosaic_last_img'));
});

Answer 2

Переместите свой код в функцию и передайте эту функцию параметру обратного вызова fadeTo

function callback(){
                    // Then move the image
                    $('.mosaic_list li:empty', obj)
                    .random(1)
                    .html(mosaic_box.find('img')
                        .addClass('mosaic_last_img')
                        );
}

 // Fade out image to be replaced
 mosaic_box.find('img').fadeTo(7000, 0.0, callback)

Answer 3

jQuery.fadeTo () имеет необязательный параметр callBack.

http://api.jquery.com/fadeTo/

.fadeTo (длительность, непрозрачность [, обратный вызов])

callback - функция для вызова после завершения анимации.

Самый простой способ сделать это - использовать анонимную функцию -

mosaic_box.find('img').fadeTo(7000, 0.0, function(){
    $('.mosaic_list li:empty', obj)
        .random(1)
        .html(mosaic_box.find('img')
        .addClass('mosaic_last_img');
    );
});

Answer 4

fadeTo () , как и в большинстве методов, связанных с анимацией, принимают необязательный аргумент обратного вызова, который можно использовать, чтобы указать функцию, которая будет выполняться после завершения анимации.

Чтобы изменить код (не проверено):

// Fade out image to be replaced
mosaic_box.find('img').fadeTo(7000, 0.0, function() {
    // Then move the image
    $('.mosaic_list li:empty', obj)
        .random(1)
        .html(mosaic_box.find('img')
            .addClass('mosaic_last_img')
        );
});