1、 slideDown() 方法用于向下滑动元素
语法:$(selector).slideDown(speed,callback);
speed 参数规定效果的时长。可以取:"slow"、"fast" 或毫秒
callback 参数是滑动完成后所执行的函数名称
css: <style> .flip,.panel{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } .panel{ padding:50px; display:none; } </style>
html: <div class="flip">点我展开面板</div> <div class="panel">你好!</div>
jq: <script> //展开面板 $(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); </script>
2、slideUp(),用于向上滑动元素
语法:$(selector).slideDown(speed,callback);
speed 参数规定效果的时长。可以取:"slow"、"fast" 或毫秒
callback 参数是滑动完成后所执行的函数名称
jq: <script> //拉起面板 $(function(){ $(".flip").click(function(){ $(".panel").slideUp("slow"); }); }); </script>
3、 slideToggle() ,可以在 slideDown() 与 slideUp() 方法之间进行切换
如果元素向下滑动,则 slideToggle() 可以向上滑动
如果元素向上滑动,则 slideToggle() 可以向下滑动
语法:$(selector).slideToggle(speed,callback);
speed 参数规定效果的时长。可以取:"slow"、"fast" 或毫秒
callback 参数是滑动完成后所执行的函数名称
jq: <script> //显示或隐藏面板 $(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script>