0

私は実際にはほとんど完成していますが、最後の部分はまだわかりません...

私が欲しいのは、実際にはjsfiddleのアニメーションの真ん中で何が起こるかです(以下を参照)。「Hi」を真ん中に配置し、divが動き始めると2つにカットします。

最初のポジショニングがうまくいかないようです。

これまでに得たものは次のとおりです。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 が更新されました

また、X と Y の両方の値を指定しないと Firefox が暴走する傾向があるため、/ ontopを指定する項目ごとに位置を追加しました。leftright

編集

と のクラスと適切なposition属性を使用して、少しクリーンアップしました。#curtain1#curtain2

2 番目に更新された 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 に答える