jQuery:幻灯片效果/补间幻灯片选项

发布于 2024-10-13 06:49:08 字数 359 浏览 3 评论 0原文

我想通过向上滑动来隐藏一个元素。例如,请参阅此演示:

http://jsfiddle.net/HHgJU/

当红色框向上滑动,高度减小时,您将请注意,直到幻灯片完成并且红色框为“display:none”之前,其下方文本的位置才会更改。

相反,我希望文本向上移动,以占据页面中现在可用的空间,因为红色框的高度继续减小。

我该怎么做?

最终,我尝试向左滑动隐藏,同时将其不透明度淡化为 0。如果您除了回答我的问题之外还能告诉我如何做到这一点,那就加分了:)

I want to hide an element by sliding it up. For example, see this demonstration:

http://jsfiddle.net/HHgJU/

When the red box slides up, decreasing in height, you'll notice that the position of the text below it does not change until the slide is complete and the red box is "display:none."

Instead, I would like the text to move up to take the space in the page that is now available as the height of the red box continues to decrease.

How can I do this?

Ultimately, I'm trying to slide left to hide while simultaneously fading its opacity out to 0 at the same time. Bonus points if you can tell me how to do this in addition to answering my question :)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(2

后知后觉 2024-10-20 06:49:08

使用高度的手动动画更新了您的小提琴(单击此处),以完全按照您所描述的方式进行操作。基本上,我使用 .animate() 方法将高度设置为 0px,然后在回调中更改 display:none。下面的文字随着高度的缩小而向上滑动。

这是一个更新的小提琴(点击此处),其中包含您的奖金问题。现在只是对宽度和不透明度进行动画处理。

作为额外的好处,两者都在一起!

I updated your fiddle (click here) with a manual animation of the height to do exactly what you described. Basically, I'm using the .animate() method to animate the height to 0px and then changing display:none in the callback. The text below slides up as the height shrinks.

And here's an updated fiddle (click here) with your bonus question. Instead now just animating width and opacity.

And as an added bonus, here's both together!

灼痛 2024-10-20 06:49:08

您可以使用 .slideUp()(link)

$("div").slideUp(1000);

演示

is it possible for you to use .slideUp()(link)?

$("div").slideUp(1000);

demo

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