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

发布于 2024-12-17 05:56:42 字数 416 浏览 0 评论 0原文

我有一个问题，我想要淡出图像，然后将图像移动到空的

容器。然而，图像并没有褪色，相反，它看起来像是使用 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')
    );

原文

I have a problem where I want to fade out an image, then move the image to an empty <li> container. However, the image doesn't fade, instead it just seems like the fade is being overridden by the move, using html().

Below is what I'm trying to do. Is there a way I can force the move to wait for the fade to complete?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

漫雪独思 2024-12-24 05:56:42

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

Do the move in the callback from the fadeTo function:

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

回复收藏 0 原文

栖竹 2024-12-24 05:56:42

将代码移至函数中并将该函数传递给 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)

Move your code into a function and pass that function to the callback param of 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)

回复收藏 0 原文

落墨 2024-12-24 05:56:42

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

fadeTo(), as with most animation related methods, accept an optional callback argument which you can use to specify the function to run once the animation is completed.

To modify your code (untested):

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

回复收藏 0 原文

梦魇绽荼蘼 2024-12-24 05:56:42

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

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

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

jQuery.fadeTo() has an optional callBack parameter.

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

.fadeTo( duration, opacity [, callback] )

callback - A function to call once the animation is complete.

The simplest way to do this is using an anonymous function -

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

回复收藏 0 原文

~没有更多了~