jQuery:幻灯片效果/补间幻灯片选项
我想通过向上滑动来隐藏一个元素。例如,请参阅此演示:
当红色框向上滑动,高度减小时,您将请注意,直到幻灯片完成并且红色框为“display:none”之前,其下方文本的位置才会更改。
相反,我希望文本向上移动,以占据页面中现在可用的空间,因为红色框的高度继续减小。
我该怎么做?
最终,我尝试向左滑动隐藏,同时将其不透明度淡化为 0。如果您除了回答我的问题之外还能告诉我如何做到这一点,那就加分了:)
I want to hide an element by sliding it up. For example, see this demonstration:
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我使用高度的手动动画更新了您的小提琴(单击此处),以完全按照您所描述的方式进行操作。基本上,我使用
.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 changingdisplay: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!
您可以使用
.slideUp()
(link)?演示
is it possible for you to use
.slideUp()
(link)?demo