jquery - 页面加载时如何使两个类标签分别缓和

Question

当我的页面加载时，我会先加载“.alpha”，然后几秒钟后使用 jquery 加载“.omega”。有没有例子？我会使用easeIn、fadeIn 还是fadeOut？

谢谢你。

如何在其中添加“.omega”？

jQuery(document).ready(function () {


jQuery(window).load(function () {
    setTimeout(function () {
        $(".alpha").fadeOut("fast", function () {})
    }, 500)
})


});

Answer 1

Use callbacks in fadeIn() functions:

$('.first').fadeIn(function(){
    $('.second').fadeIn()
})

Look at fiddle: http://jsfiddle.net/WPw25/

If you want a delay use delay() function:

$('.first').fadeIn(function(){
    $('.second').delay(3000).fadeIn()
})

Fiddle: http://jsfiddle.net/WPw25/1/

Answer 2

You could use

    $(".alpha").fadeIn(1000);
    $(".omega")delay(1000).fadeIn();

Answer 3

我会使用setTimeout和使用fadeIn

//you probably do not need to use setTimeout for .alpha, but just in case...
setTimeout(function() {
    $('.alpha').fadeIn();
}, 100);

//then load .omega 2 seconds after .alpha...
setTimeout(function() {
    $('.omega').fadeIn();
}, 2100);

更新以回答您的示例：

jQuery(document).ready(function() {
    jQuery(window).load(function() {
            //load in .alpha
        setTimeout(function() {
            $(".alpha").fadeIn("fast", function() {
                //alpha finished loading
                //now load omega
                setTimeout(function() {
                    $(".omega").fadeIn("fast", function() {
                        //omega finished loading
                    })
                }, 2000);
            });
        }, 500);
    });
});

Answer 4

$(this).delay(2000).animate({
                    'margin-top':'60%',
                    'opacity':0},2000,function(){

                        $(this).remove();
                        if(nr==1){
                            showIntro(2);
                        }else if(nr==2){
                            $('.wrapper').fadeIn(2000);
                        }
                });  

JSFIDDLE 演示