JQuery slides in different directions (such as horizontal slides) and jquery slides

JQuery slides in different directions (such as horizontal slides) and jquery slides

Introduce jquery. js and copy the following code to run it.

 

Css code  

1. <Style type = "text/css">
2. . Slide {
3. Position: relative;
4. Height: 200;
5. Lightyellow;
6. }
8. . Slide. inner {
9. Position: absolute;
10. Left: 0;
11. Bottom: 0;
12. Height: 100;
13. Lightblue;
14. Width: 100%
15. }
16. </Style>

 

1. slidetoggle () Alternate slidedown (), slideup ()

 

Html code  

1. <Div id = "slidebottom" class = "slide">
2. <Button>
3. Slide it
4. </Button>
5. <Div class = "inner">
6. Slide from bottom
7. </Div>
8. </Div>

 

Js Code  

1. $ ('# Slidebottom button'). click (function (){
2. $ (This). next (). slideToggle ();
3. });

 

 

2. Slide the Animate Left horizontally on the Left

 

Html code  

1. <Div id = "slidewidth" class = "slide">
2. <Button>
3. Slide it
4. </Button>
5. <Div class = "inner">
6. Slide from bottom
7. </Div>
8. </Div>

 

Js Code  

1. $ ("# Slidewidth button"). click (function (){
2. $ (This). next (). animate ({width: 'toggle '});
3. });

 

3. Slide Animate Left Margin horizontally on the Left side (non-hidden)

 

Html code  

1. <Div id = "slideleft" class = "slide" style = "width: 50%; float: right">
2. <Button>
3. Slide it
4. </Button>
5. <Div class = "inner">
6. Slide from bottom
7. </Div>
8. </Div>

 

Js Code  

1. $ ("# Slideleft button"). click (function (){
2. Var $ lefty = $ (this). next ();
3. $ Lefty. animate ({
4. Left: parseint(lelefty.css ('left'), 10) = 0? -$ Lefty. outerWidth (): 0
5. });
6. });

 

 

4. Slide to right on the right side

 

Html code  

1. <Div id = "slidemarginleft" class = "slide" style = "width: 60%; float: left">
2. <Button>
3. Slide it
4. </Button>
5. <Div class = "inner">
6. Slide from bottom
7. </Div>
8. </Div>

Js Code  

1. $ ("# Slidemarginleft button"). click (function (){
2. Var $ marginlefty = $ (this). next ();
3. $ Marginlefty. animate ({
4. MarginLeft: parseint(inclumarginlefty.css ('marginleft'), 10) = 0? $ Marginlefty. outerWidth (): 0
5. });
6. });

 

 

 
Principle of horizontal sliding of jquery special effect Images

Overflow = hidden;

Jquery plug-ins for horizontal page slide and jump

Www.oschina.net/project/tag/285/jquery-scroll. You can modify the code by yourself!