JQuery - 页面加载时主页幻灯片动画,但每个查看者只能播放一次
将两个 div 相互滑动的最佳方法是什么?基本上,我将主页分为两个部分。我希望它们彼此向下滑动和向上滑动,但每个观看者只发生一次。
<div id="wrap">
<div id="slideDown">Slide down</div>
<div id="slideUp">Slide up</div>
</div>
What's the best way to slide two divs into each other. Basically, I split my homepage into two sections. I want them to slide down and slide up into each other, but happen only once for each viewer.
<div id="wrap">
<div id="slideDown">Slide down</div>
<div id="slideUp">Slide up</div>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您将需要使用 jQuery 的动画效果
slideUp
和slideDown
(请参阅 tandu 的答案)或仅使用animate
如果您觉得更冗长。但是,为了阻止浏览器在回访时执行此动画,您需要存储一个 cookie。 jquery-cookie 插件 是一个很好的起点。基本上您要做的是:
这不会是完美的,因为 cookie 不是持久存储的形式,例如,如果用户清除其 cookie,动画将再次执行。
希望有帮助!
You're going to need to use jQuery's animation effects
slideUp
andslideDown
(see tandu's answer) or just useanimate
if you're feeling more verbose.But, in order to stop the browser from executing this animation on a return visit, you're going to need to store a cookie. The jquery-cookie plugin is a good place to start. Basically what you're going to want to do is:
It isn't going to be perfect because cookies aren't a form of persistent storage, e.g. if a user clears their cookies, the animation will execute again.
Hope that helps!
jQuery的
.slideUp
和.slideDown
分别通过滑动隐藏和显示内容。为了让.slideUp
实际显示内容,您必须使用 jQuery UI 显示幻灯片效果,如下所示:但是,很难确切地说出您想要什么,如果您只是粘贴我所拥有的内容那里(假设你有效果 UI)它只会为每个视图触发一次。
jQuery's
.slideUp
and.slideDown
hide and show content by sliding, respectively. In order to have.slideUp
actually show content, you have to use jQuery UI show effect for slide, as in:It's hard to tell exactly what you want, though, and if you just paste what I have there (assuming you have the effects UI) it will only trigger once for each view.