Question

id想知道它是否有可能用css3转换，该元素在另一个fdesIn之后向下滑动。 Heres小提琴，所以可能会更清楚;）Fiddle

我喜欢这个#text在图片淡入之后向下滑动而不仅仅是跳下来;）

Answer 1

你可以这样做：

<强> JS

setTimeout(function() {

    $("#container img").fadeIn(1300, function() { 

        $("#text").slideDown(200); 

    });

}, 1500);

<强> CSS

#text{
   display:none;
}

<强> DEMO

Answer 2

您需要从DOM流中分离#text div。使用当前设置方式，文本将始终受图像影响。为了单独转换它，你需要将文本CSS作为绝对文本，然后在fadeIn回调中将其向下滑动：

setTimeout(function () {

   $("#container img").fadeIn(1300, function () {
       $("#text").animate({
           top: '125px'
       }, 1000);
   });

}, 1500);

这是更新的Fiddle

Answer 3

CSS

#container img{
    overflow: hidden;
    max-height: 0;    
    transition: all 1s;
    -webkit-transition: all 1s;
}
#container img.shown {
    max-height: 20em;
}

JS

setTimeout(function() {
    $("#container img").addClass('shown');
},1500);

html未更改

不幸的是，您无法将max-height设置为值auto，因此您必须在图片显示后选择合理的最大高度

淡出后，其他元素向下滑动

3 个答案: