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

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

jsFiddle updated

我还为您指定top / left的每个项目添加了right位置，因为如果您未同时指定X＆amp; Y值。

修改

使用position和#curtain1的类和#curtain2属性清理了一点。

Second updated jsFiddle

Answer 2

如果我明白你要做什么，你需要给窗帘宽50％并左右定位。

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

请参阅更新后的Fiddle。

jquery slice div动画（幕布样式）

2 个答案: