jQuery切片div爲動畫段

Question

是否有可能使用jQuery和CSS將div分成兩部分，然後分別對兩部分分別進行動畫製作？

爲了更好的解釋，看到這個圖：

任何幫助將是非常讚賞 - 在此先感謝。

Answer 1

你可以用這樣的一對容器div來僞造它：jsFiddle example。

HTML

<div id="top"><div>Some text here</div></div> 
<div id="bottom"><div>Some text here</div></div>​ 

CSS

#top,#bottom { 
    background: #333; 
    width:200px; 
    height:100px; 
    position:relative; 
    overflow:hidden; 
} 
#top div { 
    position:relative; 
    top: 90px; 
    color:#eee; 
    text-align:center; 
} 
#bottom div { 
    position:relative; 
    top: -10px; 
    color:#eee; 
    text-align:center; 
} 

jQuery的

$('#bottom').delay(2000).animate({ 
    bottom: '-200px' 
},4000); 
$('#top').delay(2000).animate({ 
    top: '-200px' 
},4000); 

Answer 2

不，你不能顯示一個這樣的div。但是，您可以在每個副本上覆制並限制大小一半，然後對兩者都進行動畫處理。

Answer 3

您可以製作2個div，並且每個設置爲overflow:hidden;。

之後，將文本放置在左側相同的位置，但略低於div的一個位置，稍高一位，以便每個文本都被「剪切」一半。 （或者這是一個解決辦法）