jQuery experiments: Expand/Collapse in different directions
These jQuery examples were inspired by Karl Swedberg's article - Slide Elements in Different Directions. Here, the concept has been implemented slightly differently.
With JavaScript disabled, the links "Collapse"/"Expand" are needless and could only confuse the user. That's why, to separate the behaviour from the content, the elements that trigger the animation are generated by the jQuery script.
-
1.
Slide from the bottom up or from the top down
-
2.
Slide/Fade from the bottom up or from the top down
-
3.
Animate the width
-
4.
Animate the width and the opacity
-
5.
Animate left margin
-
6.
Animate left margin
-
7.
Animate the left CSS property
-
8.
Animate the left CSS property
-
9.
Animate the width CSS property
Wav!
-
10.
Animate left and bottom CSS properties