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')
    );

- Harry F

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'));
});

- Richard Dalton

---

感谢@Richard D - 唯一的问题是，我现在将图像淡出，将其移动到一个空的<li>中，但我的脚本不再淡入新图像。我意识到这可能超出了我最初提出的问题范围，但基于您对我的代码所做的修改，您是否能想到任何可能导致此问题的原因？ - Harry F

好的，问题解决了 - 我需要将执行fadeIn的下一个代码块包装在同一个匿名函数中。 - Harry F

是的，所有你想要在fadeOut之后发生的事情都必须在回调函数内发生。 - Richard Dalton

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)

- Keith.Abramo

Answer 3

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')
        );
});

- Shawn Chin

Answer 4

jQuery.fadeTo() 函数有一个可选的 callBack 参数。

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

.fadeTo( duration, opacity [, callback] )

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');
    );
});

- Aditya Ravi Shankar