tranche jquery animation div (style rideau)

Question

Je suis en fait presque terminé, ne peux pas comprendre la dernière partie encore ...

Ce que je veux est en fait ce qui se passe exactement au milieu de l'animation dans mon jsfiddle (voir ci-dessous), je veux que le "Hi" soit positionné au milieu et coupé en deux lorsque les divs commencent à bouger.

Je n'arrive pas à obtenir le positionnement initial correct.

Voici ce que je suis arrivé à ce jour: 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); 

Quelqu'un a une idée de comment faire cela? Merci!

Answer 1

Si je comprends ce que vous essayez de faire, vous devez donner les rideaux d'une largeur de 50% et la position gauche et à droite les.

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

Voir la mise à jour Fiddle.

Answer 2

Débarrassez-vous de overflow:hidden. Il couvre la moitié gauche du H.

jsFiddle updated

J'ai aussi ajouté une position top pour chaque élément que vous spécifiez left/right, parce que Firefox a tendance à boinking si vous ne spécifiez pas les deux X & Y valeurs.

EDIT

nettoyaient un peu par l'utilisation d'attributs classe et appropriés position pour la #curtain1 et #curtain2.

Second updated jsFiddle