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

jQuery折叠褪色的div和扩展动画问题

jQuery:动画后div弹回全尺寸

如何在jQuery中动画滚动到div?

如何在不将页面滚动条重置为顶部的情况下使用 jQuery 为固定 div 设置动画

jQuery 左右动画