使用fadeIn使DIV平滑显示



所以我有两个div(以图形方式(链接。我希望这些分开一段时间。到目前为止,它们只是在一毫秒内反弹出来。

JSfiddle:http://jsfiddle.net/447TH/

$(document).ready(function(){
$("article").fadeIn('slow', function(){
     $('.segment1').fadeIn(3000);
}); 
});  

如果你看一下JSfiddle,我相信如果我的描述含糊不清,你会明白我的意思。提前谢谢!

DEMO

不要使用fadeIn,而是使用maxHeight技术。

JS:

// JavaScript Document
$(document).ready(function () {
    $('article').animate({maxHeight:999},3000);
    setTimeout(function(){
        $('.segment1').animate({opacity:1},1000, function(){
            //do something after segment revealed
        });
    }, 1000);
});

Css:

article{
    ...
    display:block;
    ...
    max-height: 0;
    ...
}

使用slideDown代替fadeIn

$('document').ready(function(){
    $("article").fadeIn('slow', function(){
         $('.segment1').slideDown(5000);
    }); 
}); 

更新的Fiddle

$('document').ready(function(){
$("article").fadeIn('slow', function(){
     $('.segment1').fadeIn('slow');
}); 
}); 

试试这个,我认为它的工作

最新更新