jQuery slice 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，每个div都设置为overflow:hidden;。

之后，将文本放在左边相同的位置，但是稍微低于它的div，稍微高一个，这样每个文本都会被“切”成两半。 （或者这是一个可以解决的问题）