是否可以使用 jQuery 和 CSS 将 div 一分为二,然后分别为这两个部分设置动画?
为了更好地解释,请参见此图:
任何帮助将不胜感激 - 在此先感谢。
是否可以使用 jQuery 和 CSS 将 div 一分为二,然后分别为这两个部分设置动画?
为了更好地解释,请参见此图:
任何帮助将不胜感激 - 在此先感谢。
您可以使用一对这样的容器 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>
不,你不能像那样显示一个 div。但是您可以在每个副本上复制并将大小限制为一半,然后为两者设置动画。
您可以制作 2 个 div,并让每个overflow:hidden;
.
之后,将文本放置在左侧相同的位置,但一个略低于 div,一个略高于 div,以便将每个文本“剪切”成两半。(或者这是一种解决方法)