jquery 之隐藏展开slide用法

HTML Code

 

                 

<divid="slideMe">

   This content will appear and disappear when the div is slid in and out.

</div>

<!-- One button for each slidecommand -->

<inputtype="button"id="btnSlideUp"value="SlideUp">

<inputtype="button"id="btnSlideDown"value="SlideDown">

<inputtype="button"id="btnSlideToggle"value="SlideToggle">

                  

               

JavaScript Code

 

                 

$('#btnSlideUp').click(function(){

   $('#slideMe').slideUp('slow');

});

$('#btnSlideDown').click(function(){

   $('#slideMe').slideUp();

});

$('#btnSlideToggle').click(function(){

   $('#slideMe').slideToggle('fast');

});

 

展示效果：

5 透明隐藏的用法fade

HTML Code

 

                 

<divid="fadeMe">

   This content will appear and disappear when the div is faded in and out.

</div>

<!-- One button for each fadingcommand -->

<inputtype="button"id="btnFadeOut"value="FadeOut">

<inputtype="button"id="btnFadeIn"value="FadeIn">

                  

               

JavaScript Code

 

                 

$('#btnFadeIn').click(function(){

   $('#fadeMe').fadeIn('slow');

});

$('#btnFadeOut').click(function(){

   $('#fadeMe').fadeOut();

});