淡入淡出後，其他元素滑落

id想知道是否可以用css3過渡，該元素是滑下來，在另一個淡入淡出。繼承人小提琴，所以可能會使得它更清晰;）Fiddle 淡入淡出後，其他元素滑落

標識這樣#text滑下圖像變淡後，不只是跳下來;）

2014-02-11 Mateusz Winnicki

CSS

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

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

HTML沒有改變

可惜的是你不能動畫max-height的值auto，所以你必須要選擇合理的最大高度的畫面顯示

來源

2014-02-11 16:25:48 doodeec

也贏得在IE中<10 –

他想要CSS3解決方案，這是CSS3 ...和IE糟透了:) – doodeec

真棒，謝謝;）並感謝IE瀏覽器的建議，但我不在乎IE; p只是如果有些人仍然使用它（在那裏是合適的），那麼將它變成靜態的？）xD –

你可以這樣說：

setTimeout(function() { 

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

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

    }); 

}, 1500);

CSS

#text{ 
    display:none; 
}

DEMO

來源

2014-02-11 16:14:45

後，應該在哪裏滑下從如果不滑動呢？ – loveNoHate

@dollarVar因爲'＃text'具有css'display：none;'它的維度爲0x0（已隱藏）。現在，當你調用'slideDown（）'時，它會逐漸獲得它的「自然」高度並且可見。 –

坦克你爲你的答案，但我想知道css3解決方案;） –

你需要分離從DOM的流動#text DIV。按照當前設置的方式，文字將始終受到圖像的影響。爲了分開過渡吧，you'l升需要的CSS文本是絕對的，然後向下滑動的淡入回調：

setTimeout(function() { 

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

}, 1500);

這裏是一個更新的Fiddle

來源

2014-02-11 16:20:54 Bic

坦克你的答案，但是我想知道css3的解決方案;）我知道如何使用jquery動畫;） –

淡入淡出後，其他元素滑落

回答

相關問題