• 中文
    • English
  • 注册
  • 查看作者
    • 3:JQuery动画

      一.  显示隐藏动画

      我们想通过页面中的一个按钮来显示和隐藏列表,可以通过toggle方法来显示隐藏元素(第一次点击隐藏,再次点击显示),通过fadeToggle和slideToggle来添加显示隐藏动画。

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
          <script type="text/javascript">
              $(function () {
                  $("#btn").click(function () {
                      // $("ul").show();显示元素
                      // $("ul").hide();隐藏元素
                      // $("ul").toggle();
                      // $("ul").fadeToggle(); //有隐藏动画:渐变隐藏
                      $("ul").slideToggle(); //有隐藏动画:从下到上隐藏
                  });
              });
          </script>
      
      </head>
      <body>
      
      <button id="btn">按钮</button>
      <ul>
          <li>列表项11</li>
          <li>列表项2</li>
          <li>列表项3</li>
          <li>列表项4</li>
          <li>列表项5</li>
          <li>列表项6</li>
          <li>列表项7</li>
          <li>列表项8</li>
          <li>列表项9</li>
          <li>列表项10</li>
      </ul>
      </body>
      </html>

      slideToggle还可以通过参数来控制速度:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <style type="text/css">
              div {
                  width:200px;
                  height: 200px;
                  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
              }
          </style>
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
          <script type="text/javascript">
              function animate() {
                  // $("div").slideToggle(1000,animate());  //错误的写法
                  $("div").slideToggle(1000,animate);  //如果和上面一样加了(),则是调用animate方法,而不加()是把这个方法作为参数传入
              }
      
              $(function () {
                  $("button").click(function () {
                      animate();
                  });
                  
              });
          </script>
      
      </head>
      <body>
      <button>按钮</button>
      <div></div>
      
      </body>
      </html>

      山东省
    • 0
    • 0
    • 0
    • 1.1k
    • 请登录之后再进行评论

      登录

      赞助本站

      • 支付宝
      • 微信
      • QQ

      感谢一直支持本站的所有人!

      单栏布局 侧栏位置: