JQuery - 在页面加载时首页幻灯片动画，但每个查看器只有一次

Question

将两个div彼此滑动的最佳方式是什么？基本上，我把我的主页分成两部分。我希望他们滑下来滑入彼此，但每个观众只发生一次。

<div id="wrap"> 
<div id="slideDown">Slide down</div> 
<div id="slideUp">Slide up</div> 
</div> 

Answer 1

您将需要使用jQuery的动画效果slideUp和slideDown（请参阅tandu的答案），或者只是在使用animate时感觉更加冗长。

但是，为了阻止浏览器在回访时执行此动画，您将需要存储cookie。 jquery-cookie plugin是一个很好的开始。基本上你想要做的是：

1. 检查是否存在doNotLoadAnimation cookie。
2. 如果不存在，设置doNotLoadAnimation cookie，并显示动画，否则显示W/O动画

它不会因为cookie不是永久存储，例如一种形式是完美的页面如果用户清除了他们的cookies，动画将再次执行。

希望有帮助！

Answer 2

jQuery的.slideUp和.slideDown分别滑动，隐藏和显示内容。为了有.slideUp实际显示的内容，你必须使用jQuery UI显示效果的幻灯片，如：

$("#slideUp").show('slide', {direction: 'up'}); 

这很难说，你想要什么，不过，如果你只是贴上我有什么存在（假设你有效果UI），它只会为每个视图触发一次。