006-jQuery效果-滑动-CFANZ编程社区

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#flipDown").click(function(){
          $("#panel").slideDown("slow");
        });
        $("#flipUp").click(function(){
          $("#panel").slideUp("slow");
        });
        $("#flipToggle").click(function(){
          $("#panel").slideToggle("slow");
        })
      });
      
    </script>
    <style>
      #panel, #flipUp,#flipDown,#flipToggle{
        padding:5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
      }
      #panel{
        padding: 50px;
        display: none;
      }
    </style>
  </head>
  <!--
    jQuery滑动方法可以使元素上下滑动
    jQuery滑动方法
      通过jQuery,您可以在元素上创建滑动效果.
      jQuery拥有以下滑动效果
      slideDown()
      slideUp()
      slideToggle()
    jQuery slideDown()方法
      jQuery slideDown()方法用于向下滑动元素
      语法
      $(selector).slowDown(speed, callback);
      可选的speed参数规定效果的时长,他可以选取以下值"slow","fast"或者毫秒
      可选的callback参数是滑动后所执行的函数名称
      下面例子展示了slideDown()方法
    jQuery slideUp()方法
      jQuery slideUp()方法用于向上滑动元素
      语法
      $(selector).slideUp(speed, callback);
      可选的speed参数规定效果的时长,他可以取以下值:"slow", "fast"或者毫秒
      可选的callback函数时滑动完成后所执行的函数名称
      下面的励志演示了slideUp()方法
      实例
      $("#flipUp").click(function(){
        $("#panel").slideUp("slow");
      });
    jQuery slide Toggle()方法
      jQuery slide Toggle()方法可以在slideDown()与slideUp()方法之间进行切换
      如果元素向下滑动,则slideToggle()可以向上滑动他们
      如果元素向上滑起,则slideToggle()可以向下滑动他们
      语法
      $(selector).slideToggle(speed, callback)
      可选的speed参数规定效果的时长,他可以取以下值:"slow", "fast"或者毫秒
      可选的callback函数时滑动完成后所执行的函数名称
      下面是实例
      
  -->
  <body>
    
    <div id="flipDown">点我下滑面板</div>
    <div id="flipUp">点击拉起面板</div>
    <div id="flipToggle">点我显示或隐藏面板</div>
    <div id="panel">Hello World！</div>
  </body>
</html>