全屏演示: http://sandbox.runjs.cn/show/iqviha2p
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type='text/javascript' src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script> <style> div, p { margin:0px; background:#e5eecc; border:solid 1px #c3c3c3; font: 14px/20px "微软雅黑"} .down, .up , .slideToggle, .toggle{ height: auto; display: none; padding:20px 400px; } .up { display: block;} .flip_1, .flip_2, .flip_3, .flip_4{ text-align:center;} div:nth-child(odd) { margin-top: 50px;} div:nth-child(1) { margin-top: 0px;} </style> <script> $(function(){ // slideDown() // slideUp() // slideToggle() // toggle() $('.flip_1').click(function(){ $('.down').slideDown('show'); //一次性 }); $('.flip_2').click(function(){ $('.up').slideUp('show'); //一次性 }); $('.flip_3').click(function(){ $('.slideToggle').slideToggle('show'); //垂直滑动 }); $('.flip_4').click(function(){ $('.toggle').toggle('show'); //水平滑动 }); }); </script> </head> <body> <div class="down"> slideDown()函数用于显示所有匹配的元素，并带有向下滑动的过渡动画效果。向下滑动的动画效果，即元素可见区域的高度从0逐渐增大到其原有高度(向下逐渐展开)。 如果元素本身是可见的，则不对其作任何改变。如果元素是隐藏的，则使其可见。 与该函数相对的是slideUp()函数，用于隐藏所有匹配的元素，并带有向上滑动的过渡动画效果。 </div> <p class="flip_1">slideDown()演示, 向下滑动</p> <div class="up"> slideUp()函数用于隐藏所有匹配的元素，并带有向上滑动的过渡动画效果。 向上滑动的动画效果，即元素可见区域的高度从原有高度逐渐减小到0(向上逐渐收起)。 如果元素本身是隐藏的，则不对其作任何改变。如果元素是可见的，则将其隐藏。 与该函数相对的是slideDown()函数，用于显示所有匹配的元素，并带有向下滑动的过渡动画效果。 </div> <p class="flip_2">slideUp()演示, 向上滑动</p> <div class="slideToggle"> slideToggle()函数用于切换所有匹配的元素，并带有滑动的过渡动画效果。 所谓"切换"，也就是如果元素当前是可见的，则将其隐藏(向上滑动)；如果元素当前是隐藏的，则使其显示(向下滑动) </div> <p class="flip_3">slideToggle()演示, 垂直滑动</p> <div class="toggle"> toggle()函数用于切换所有匹配的元素。此外，你还可以指定元素切换的过渡动画效果。 所谓"切换"，也就是如果元素当前是可见的，则将其隐藏；如果元素当前是隐藏的，则使其显示(可见)。PS:这里介绍的toggle()函数用于切换元素的显示/隐藏。jQuery还有一个同名的事件函数toggle()，用于绑定click事件并在触发时轮流切换执行不同的事件处理函数。 </div> <p class="flip_4">toggle()演示, 水平滑动</p> </body> </html>