Jquery Tutorial part 2 : slideUp() slideDown() slideToggle()
video
slideUp( [speed|speed][, callback] ):
I want to hide the element ("div") by manipulating the height of each element, disappeared from the bottom to the top.
Animation effects are executed at the speed that you specify.
Specifies the time, in milliseconds, to complete or, "slow", "normal", "fast", the speed. If "1500" for example, the animation is done over 1.5 seconds.
, "Normal" if it is omitted that I used.
In addition, you can also be specified in the second argument to the function to be called when the effect is complete.
click
and View the results
slideDown( [speed|speed][, callback] ) :
I have to show the element ("div") by manipulating the height of each element, come down to slide from top to bottom.
Animation effects are executed at the speed that you specify.
Specifies the time, in milliseconds, to complete or, "slow", "normal", "fast", the speed. If "1500" for example, the animation is done over 1.5 seconds.
"Normal" if it is not set I is used.
In addition, you can also be specified in the second argument to the function to be called when the effect is complete.
Animation effects are executed at the speed that you specify.
Specifies the time, in milliseconds, to complete or, "slow", "normal", "fast", the speed. If "1500" for example, the animation is done over 1.5 seconds.
"Normal" if it is not set I is used.
In addition, you can also be specified in the second argument to the function to be called when the effect is complete.
click
and View the results
slideToggle( [speed|speed][, callback] ):
Operate the height of each element, we performed alternately operation slideDown / slideUp.
Animation effects are executed at the speed that you specify.
Specifies the time, in milliseconds, to complete or, "slow", "normal", "fast", the speed. If "1500" for example, the animation is done over 1.5 seconds.
, "Normal" if it is omitted that I used.
In addition, you can also be specified in the second argument to the function to be called when the effect is complete.
Animation effects are executed at the speed that you specify.
Specifies the time, in milliseconds, to complete or, "slow", "normal", "fast", the speed. If "1500" for example, the animation is done over 1.5 seconds.
, "Normal" if it is omitted that I used.
In addition, you can also be specified in the second argument to the function to be called when the effect is complete.
slide up
the results
slide down
finale code :
<?/* dzKabyle web2-teach.blogspot.com */?> <style> .show_div, .li-box, .show_hide{ -webkit-border-radius: 15px; -moz-border-radius: 10px; border-radius: 10px; } .show_div{ border:solid 1px #8e8e04; background:#FFFFCC; color:#222222; padding:6px; text-align:center; } .li-box{ border:solid 1px #27739d; background:#94d5fb 97% ; color:#222222; padding:6px; text-align:center; } .show_hide{ border:solid 1px #90ac13; background:#eef4d3 ; color:#222222; padding:6px; text-align:center; } .a { font-size: 24px; border:solid 1px #ba4c0e; background:#ffcaa4; color:#222222; padding:6px; text-align:center; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script> $(document).ready(function(){ $("#hide-box").click(function(){ $("#li-box").slideUp(700,function(){}); }); $("#show-box").click(function(){ $("#show_div").slideDown(700,function(){}); }); $("#toggle_box").click(function(){ $("#toggle_div").slideToggle(700,function(){}); }); }); </script> </head> <body> <span class="a"><a>Example : slide Up</a></a></span><br><br> <span id="hide-box">Up</span><br><br> <div id="li-box" class="li-box" >slide Up</div><br> <span class="a"><a>Example :slide Down</a></span></a><br><br> <span id="show-box">Down</span><br><br> <div id="show_div" class="show_div" style="display:none" >slide Down</div> <br> <span class="a"><a>Example : Toggle</a></span><a></a><br><br> <span id="toggle_box">Up/Down</span><br><br> <div id="toggle_div" class="show_hide" >Up/Down</div> <br>
0 commentaires:
Post a Comment