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

与大多数动画相关的方法一样，

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

Answer 4

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

jQuery - 等待淡入淡出完成的正确方法

4 个答案: