jQuery的片格动画（窗帘风格）

实际上，我几乎做到了，只是想不通的最后一部分尚未...jQuery的片格动画（窗帘风格）

我要的其实就是在动画的中间到底发生了我jsfiddle（见下文），我希望将“Hi”定位在中间位置，并在div开始移动时切入两个位置。

我似乎无法获得最初的定位权。

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);

任何人有一个想法，如何做到这一点？谢谢！

来源

2013-05-29 Phil

如果我明白你正在尝试做的，你需要给窗帘50％的宽度和位置他们左右。

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

查看更新的Fiddle。

来源

2013-05-29 16:20:19

谢谢，那就是诀窍！你有什么建议，以避免动画开始时出现水平滚动条？我试图将两个窗帘divs包装成100％宽度和高度的单个div，并且溢出：隐藏，但它似乎没有工作。 – Phil

添加一个位置：relative; （或者根据需要固定或者绝对的）到容器。由于窗帘的位置是绝对的，因此除非他们的父母被定位，否则他们不在文档流中。 –

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

jsFiddle updated

我还增加了每个项目top位置，你指定的left/right，因为Firefox拥有，如果你不同时指定boinking的趋势X值为。

编辑

利用类和适当position属性为#curtain1和#curtain2清理了一点点。

Second updated jsFiddle

来源

2013-05-29 16:19:32 PlantTheIdea

感谢您的建议，它似乎像jsfiddle不工作，虽然？也许它需要将窗帘宽度设置为50％？ – Phil

哪jsFiddle？我在Chrome，Firefox和IE上都进行了测试。我也只是更新了它们，以包含“overflow：hidden”窗帘的包装，以防止您在接受的帖子中提到的水平滚动条。 – PlantTheIdea

嗯，我可能没有在自己想要达到的目标中解释自己，这正是我想要的：http://jsfiddle.net/WwwCn/6/ – Phil

jQuery的片格动画（窗帘风格）

回答

相关问题