jQuery - 动画可折叠DIV，向上滑动？ [英] jQuery - Animated Collapsible DIV, sliding up?

问题描述

我使用这个jQuery脚本来动画一个div，当用户点击一个按钮时打开/关闭：
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

有什么办法可以让它向上滑动，而不是down？

我的意思是：而不是DIV向下开放（扩展下面的区域），是否有可能将内容扩展到它，它不会向下延伸？

Blarh，我发现很难描述。

示例：

 之前：
 1 ###页首### 
 2 ### ############## 
 3 ################# 
 4 ######### ######## 
 5 ################# 
 6 ###### BUTTON ##### 
 7 ### HIDDEN DIV #### 
 8 ##页底＃
 
后：
 1 ###页首### 
 2 ################# 
 3 ###### BUTTON ##### 
 4 ##### OPEN DIV ### ＃
 5 ####内容###### 
 6 ####内容### ### 
 7 ####内容###### 
 8 ##页底＃
 
而不是像这样，默认值：
 1 ###页首### 
 2 ################# 
 3 ############# #### 
 4 ################# 
 5 ################# 
 6 ###### BUTTON ##### 
 7 ##### OPEN DIV #### 
 8 ####内容###### 
 9 ####内容###### 
 10 ###内容###### 
 11＃页面底部＃
  

对不起，我蹩脚的解释，但我希望你明白：P

谢谢！

解决方案

您可以使用 JQuery slideUp 隐藏元素或 JQuery slideDown 以显示元素
也可以使用JQuery slideToggle 切换元素

，这是一个示例

I'm using this jQuery script to animate a div to open/close when the user clicks a button: http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Is there any way to make it slide up, instead of down?

What I mean is: Instead of the DIV opening downwards (extending the area below it), is it possible for it to extend the content on top of it, so that it doesnt extend downwards?

Blarh, I'm finding it hard to describe.

Example:

Before:
1###TOP OF PAGE###
2#################
3#################
4#################
5#################
6######BUTTON#####
7###HIDDEN DIV####
8##BOTTOM OF PAGE#

After:
1###TOP OF PAGE###
2#################
3######BUTTON#####
4#####OPEN DIV####
5####CONTENT######
6####CONTENT######
7####CONTENT######
8##BOTTOM OF PAGE#

Instead of like this, as default:
1###TOP OF PAGE###
2#################
3#################
4#################
5#################
6######BUTTON#####
7#####OPEN DIV####
8####CONTENT######
9####CONTENT######
10###CONTENT######
11#BOTTOM OF PAGE#

Sorry for my crappy explanation, but I hope you understand :P

Thanks!

解决方案

you can use JQuery slideUp to hide an element or JQuery slideDown to display an element
also you can use JQuery slideToggle to toggle the element

and this is an example

这篇关于jQuery - 动画可折叠DIV，向上滑动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！