jQuery 将 div 切片成动画片段
Posted
技术标签:
【中文标题】jQuery 将 div 切片成动画片段【英文标题】:jQuery slice div into animatable segments 【发布时间】:2012-06-20 16:22:02 【问题描述】:是否可以使用 jQuery 和 CSS 将一个 div 一分为二,然后分别为这两个部分设置动画?
为了更好地解释,请看这张图:
任何帮助将不胜感激 - 在此先感谢。
【问题讨论】:
如果你最终自己做,请查看 jQuery UI 的爆炸效果以获得灵感:docs.jquery.com/UI/Effects/Explode(它适用于文本) 【参考方案1】:不,你不能像那样显示一个 div。但是您可以复制每个副本并将大小限制为一半,然后为两者设置动画。
【讨论】:
【参考方案2】:您可以制作 2 个 div,并为每个设置设置 overflow:hidden;
。
之后,将文本放置在左侧相同的位置,但一个略低于 div,一个略高于 div,以便将每个文本“剪切”成两半。 (或者这是一种解决方法)
【讨论】:
【参考方案3】:您可以使用一对这样的容器 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);
【讨论】:
以上是关于jQuery 将 div 切片成动画片段的主要内容,如果未能解决你的问题,请参考以下文章
将 div 上的 j.truncate 与 div P 标签上的动画 marginLeft 结合起来 jQuery