tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习

最新推荐文章于 2023-08-09 10:24:33 发布

原创最新推荐文章于 2023-08-09 10:24:33 发布 · 360 阅读

CC 4.0 BY-SA版权

tab栏切换

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .wrapper {
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }
    
    .tab {
      border: 1px solid #ddd;
      border-bottom: 0;
      height: 36px;
      width: 320px;
    }
    
    .tab li {
      position: relative;
      float: left;
      width: 80px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      border-top: 4px solid #fff;
    }
    
    .tab span {
      position: absolute;
      right: 0;
      top: 10px;
      background: #ddd;
      width: 1px;
      height: 14px;
      overflow: hidden;
    }
    
    .products {
      width: 1002px;
      border: 1px solid #ddd;
      height: 476px;
    }
    
    .products .main {
      float: left;
      display: none;
    }
    
    .products .main.selected {
      display: block;
    }
    
    .tab li.active {
      border-color: red;
      border-bottom: 0;
    }
  
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    // 有些事现在不做,以后就没有机会了
    // 有些事现在不做,是为了以后做的更好

    // 页面加载的事件
    $(function(){
        // 获取所有的li标签,添加鼠标进入的事件
        $(".tab>li").mouseenter(function(){
            // 设置当前鼠标进入的li添加类样式,同时移除当前li的所有兄弟元素的
            // 类样式
            $(this).addClass("active").siblings("li").removeClass("active");
            // 设置鼠标进入的li对应的div的样式
            // 获取当前鼠标进入的li的索引值
            var index = $(this).index();
            $(".products>div:eq("+index+")").addClass("selected")
                                            .siblings().removeClass("selected");
        });
    });

  </script>

</head>
<body>
<div class="wrapper">
  <ul class="tab">
    <li class="tab-item active">国际大牌<span>◆</span></li>
    <li class="tab-item">国妆名牌<span>◆</span></li>
    <li class="tab-item">清洁用品<span>◆</span></li>
    <li class="tab-item">男士精品</li>
  </ul>
  <div class="products">
    <div class="main selected">
      <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
    </div>
  </div>
</div>

</body>
</html>

动画的相关方法上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      div {
        width: 200px;
        height: 200px;
        background-color: mediumvioletred;
      }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>

      /**
       * show和hide方法有参数
       * 参数1:时间----1000毫秒----1秒
       * 参数2:回调函数----动画执行完毕后才执行
       */

      $(function(){
          // 点击第一个按钮显示div
          $("#btn1").click(function(){
              $("#dv").show(500,function(){
                alert('完了');
              });
          });
          // 点击第二个按钮隐藏div
          $("#btn2").click(function(){
              $("#dv").hide(500,function(){
                alert('好了');
              });
          });
      });
  </script>
</head>
<body>
<input type="button" value="显示" id="btn1">
<input type="button" value="隐藏" id="btn2">
<div id="dv"></div>
  
</body>
</html>

动画的相关方法下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      div {
        width: 200px;
        height: 200px;
        background-color: mediumvioletred;
      }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>

      /**
       * 参数和上面的是一样
       * slideDonw()滑出
       * slideUp()滑入
       * slideToggle()切换滑入和滑出
       * fadeIn() 淡入
       * fadeOut() 淡出
       * fadeToggle() 切换淡入和淡出
       * fadeTo(透明值开始,透明值结束):
       *
       * slow 比较慢的
       * fast 比较快的
       * normal
       */

      // $(function(){
      //     // 点击第一个按钮显示div
      //     $("#btn1").click(function(){
      //         // 滑出
      //         $("#dv").slideDown(500,function(){
      //           alert('显示了');
      //         });
      //     });
      //     // 点击第二个按钮隐藏div
      //     $("#btn2").click(function(){
      //         // 滑入
      //         $("#dv").slideUp(500,function(){
      //           alert('隐藏了');
      //         });
      //     });

      //     // 第三个按钮
      //     $("#btn3").click(function(){
      //         // 切换
      //         $("#dv").slideToggle(500,function(){
      //           alert("切换了");
      //         });
      //     });
      // });

    
      $(function(){
          // 点击第一个按钮显示div
          $("#btn1").click(function(){
              // 淡入
              $("#dv").fadeIn(500);
          });
          // 点击第二个按钮隐藏div
          $("#btn2").click(function(){
              // 淡出
              $("#dv").fadeOut(500);
          });

          // 第三个按钮
          $("#btn3").click(function(){
             // 切换
             // $("#dv").fadeToggle(500);
             // $("#dv").fadeTo(2000,0.2);
             $("#dv").fadeTo("fast",0.2);
          });
      });
  </script>
</head>
<body>
<input type="button" value="显示" id="btn1">
<input type="button" value="隐藏" id="btn2">
<input type="button" value="切换" id="btn3">
<div id="dv"></div>
  
</body>
</html>

隐藏动画案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      div {
        width: 400px;
      }

      img {
        width: 90px;
        height: 90px;
        vertical-align: top;
      }
  </style>
  <script>
      $(function(){
          // 第一个按钮,隐藏
          $("#btn1").click(function(){
              $("div>img:last").hide(500,function(){
                  $(this).prev().hide(500,f1);
              });
          });

          // $("div>img:first").hide(500,function(){
          //     // arguments.callee少用,知道即可
          //     $(this).prev().hide(500,arguments.callee);
          // });

          // 第二个按钮,显示
          $("#btn").click(function(){
              $("div>img:first").show(500,function(){
                  $(this).next().show(500,f1);
              });
          });
      });
  </script>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<input type="button" value="显示" id="btn">
<div>
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
</div>
  
</body>
</html>

隐藏动画练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
      $(function(){
          $("div").click(function(){
              // $(this).css("width","0px");
              $(this).hide(500);
          });
      });
  </script>
</head>
<body>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
<div><img src="" alt=""></div>
  
</body>
</html>