JQuery - 页面加载时主页幻灯片动画,但每个查看者只能播放一次

发布于 2024-12-26 11:10:58 字数 229 浏览 0 评论 0原文

将两个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

丶视觉 2025-01-02 11:10:58

您将需要使用 jQuery 的动画效果 slideUpslideDown (请参阅 tandu 的答案)或仅使用 animate 如果您觉得更冗长。

但是,为了阻止浏览器在回访时执行此动画,您需要存储一个 cookie。 jquery-cookie 插件 是一个很好的起点。基本上您要做的是:

  1. 检查 doNotLoadAnimation cookie 是否存在。
  2. 如果不存在,则设置 doNotLoadAnimation cookie 并显示动画,否则显示没有动画的页面。

这不会是完美的,因为 cookie 不是持久存储的形式,例如,如果用户清除其 cookie,动画将再次执行。

希望有帮助!

You're going to need to use jQuery's animation effects slideUp and slideDown (see tandu's answer) or just use animate 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:

  1. Check for presence of doNotLoadAnimation cookie.
  2. If not present, set doNotLoadAnimation cookie and show animation, else show the page w/o the animation

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!

烈酒灼喉 2025-01-02 11:10:58

jQuery的.slideUp.slideDown分别通过滑动隐藏和显示内容。为了让 .slideUp 实际显示内容,您必须使用 jQuery UI 显示幻灯片效果,如下所示:

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

但是,很难确切地说出您想要什么,如果您只是粘贴我所拥有的内容那里(假设你有效果 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:

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

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文