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();
});