2

是否可以使用 jQuery 和 CSS 将 div 一分为二，然后分别为这两个部分设置动画？

为了更好地解释，请参见此图：

在此处输入图像描述 在此处输入图像描述

任何帮助将不胜感激 - 在此先感谢。

4

3 回答 3

6

您可以使用一对这样的容器 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);

​</p>

于 2012-06-18T16:46:59.260 回答
2

不，你不能像那样显示一个 div。但是您可以在每个副本上复制并将大小限制为一半，然后为两者设置动画。

于 2012-06-18T16:40:58.250 回答
2

您可以制作 2 个 div，并让每个overflow:hidden;.

之后，将文本放置在左侧相同的位置，但一个略低于 div，一个略高于 div，以便将每个文本“剪切”成两半。（或者这是一种解决方法）

于 2012-06-18T16:42:12.257 回答