0

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

我想要的实际上是在我的 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);

任何人都知道如何做到这一点？谢谢！

4

2 回答 2

1

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

jsFiddle 更新了

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

编辑

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

第二次更新的 jsFiddle

于 2013-05-29T16:19:32.473 回答
1

如果我理解你想要做什么，你需要给窗帘一个 50% 的宽度，并把它们放在左边和右边。

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

请参阅更新的Fiddle。

于 2013-05-29T16:20:19.720 回答