jquery slice div 动画（窗帘样式）

Question

其实我差不多完成了，只是还没想好最后一部分......

我想要的实际上是在我的 jsfiddle 动画中间发生的事情（见下文），我希望“Hi”位于中间并在 div 开始移动时切成两半。

我似乎无法正确定位初始位置。

这是我目前得到的：http://jsfiddle.net/WwwCn/

HTML

<div id="curtain1">
    <div><h1 style="color:#FFF">Hi</h1></div>
</div>
<div id="curtain2">
    <div><h1 style="color:#FFF">Hi</h1></div>
</div>

CSS

#curtain1, #curtain2 {
    background: #333;
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
}
#curtain1 div {
    position:relative;
    left: 50%;
    color:#eee;
    text-align:center;
}
#curtain2 div {
    position:relative;
    right: 50%;
    color:#eee;
    text-align:center;
}

jquery

$('#curtain1').delay(1000).animate({
    left: '-100%'
},4000);
$('#curtain2').delay(1000).animate({
    right: '-100%'
},4000);

有人知道怎么做吗？谢谢！

Answer 1

如果我理解您要做什么，您需要给窗帘 50% 的宽度并左右放置它们。

#curtain1,#curtain2 { width:50%; }
#curtain1 { left:0; }
#curtain2 { right:0; }

查看更新后的Fiddle。

Answer 2

摆脱overflow:hidden。它覆盖了 H 的左半部分。

jsFiddle updated

我还为您指定 left/right 的每个项目添加了一个 top 位置，因为如果您不同时指定 X 和 Y 值，Firefox 会出现崩溃的趋势。

编辑

通过使用#curtain1 和#curtain2 的类和适当的position 属性对其进行了一些清理。

Second updated jsFiddle