jQuery基础--动画操作

2019-09-29 15:12:29 浏览数 (1)
  • 三组基本动画
代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">

<div></div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    $("input").eq(0).click(function () {
      
      //show不传参数，没有动画效果
      //$("div").show();
      
      //show(speed)
      //speed:动画的持续时间  可以是毫秒值 还可以是固定字符串
      //fast:200ms   normal:400ms   slow:600
      //$("div").show("ddd");
    
      // show([speed], [callback])
      $("div").show(1000, function () {
        console.log("哈哈，动画执行完成啦");
      })
    });
    $("input").eq(1).click(function () {
      $("div").hide();
    })
    
  });
</script>
</body>
</html>

滑入滑出

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换">

<div></div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    
    //滑入（slideDown）  滑出：slideU
    $("input").eq(0).click(function () {
      
      //slideDown：如果不传参数，有一个默认值normal
      //$("div").slideDown();
      //$("div").slideDown(1000);
      $("div").slideDown(1000, function () {
        console.log("额呵呵");
      });
    });
    
    
    $("input").eq(1).click(function () {
      $('div').slideUp();
    })
  
  
    $("input").eq(2).click(function () {
      
      //如果是滑入状态，就执行滑出的动画，
      $('div').slideToggle();
    })
  });
</script>
</body>
</html>

　　淡入淡出

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换">

<div></div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    
    //淡入：fadeIn  淡出：fadeOut    切换：fadeToggle
    $("input").eq(0).click(function () {
      
      $("div").fadeIn(2000);
      
    });
    
    
    $("input").eq(1).click(function () {
      $("div").fadeOut(1000);
    })
    
    
    $("input").eq(2).click(function () {
      
      //如果是滑入状态，就执行滑出的动画，
      $('div').fadeToggle();
    })
  });
</script>
</body>
</html>

　　下拉菜单案例

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      padding-left: 10px;
      background-image: url(imgs/bg.jpg);
    }
    
    .wrap li {
      background-image: url(imgs/libg.jpg);
    }
    
    .wrap > ul > li {
      float: left;
      margin-right: 10px;
      position: relative;
    }
    
    .wrap a {
      display: block;
      height: 30px;
      width: 100px;
      text-decoration: none;
      color: #000;
      line-height: 30px;
      text-align: center;
    }
    
    .wrap li ul {
      position: absolute;
      top: 30px;
      display: none;
    }
  </style>
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      
      //mouseover：鼠标经过事件
      //mouseout:鼠标离开事件
      
      //mouseenter:鼠标进入事件
      //mouseleave：鼠标离开事件
      
      var $li = $(".wrap>ul>li");
      
      //给li注册鼠标经过事件，让自己的ul显示出来
      $li.mouseenter(function () {
        //找到所有的儿子，并且还得是ul
        
        //stop：停止当前正在执行的动画
        $(this).children("ul").stop().slideDown();
      });
  
      $li.mouseleave(function () {
        $(this).children("ul").stop().slideUp();
      });
      
      
    });
  </script>
</head>
<body>
<div class="wrap">
  <ul>
    <li>
      <a href="javascript:void(0);">一级菜单1</a>
      <ul class="ul">
        <li><a href="javascript:void(0);">二级菜单11</a></li>
        <li><a href="javascript:void(0);">二级菜单12</a></li>
        <li><a href="javascript:void(0);">二级菜单13</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单2</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单21</a></li>
        <li><a href="javascript:void(0);">二级菜单22</a></li>
        <li><a href="javascript:void(0);">二级菜单23</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单3</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单31</a></li>
        <li><a href="javascript:void(0);">二级菜单32</a></li>
        <li><a href="javascript:void(0);">二级菜单33</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>

　　轮播图案例

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>京东商城</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .slider {
      height: 340px;
      width: 790px;
      margin: 100px auto;
      position: relative;
    }
    
    .slider li {
      position: absolute;
      display: none;
    }

    .slider li:first-child {
      display: block;
    }
    
    
    .arrow {
      display: none;
    }
    
    .slider:hover .arrow {
      display: block;
    }
    
    .arrow-left,
    .arrow-right {
      font-family: "SimSun", "宋体";
      width: 30px;
      height: 60px;
      background-color: rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 50%;
      margin-top: -30px;
      cursor: pointer;
      text-align: center;
      line-height: 60px;
      color: #fff;
      font-weight: 700;
      font-size: 30px;
    }
    
    .arrow-left:hover,
    .arrow-right:hover {
      background-color: rgba(0, 0, 0, .5);
    }
    
    .arrow-left {
      left: 0;
    }
    
    .arrow-right {
      right: 0;
    }
  
  </style>
</head>
<body>
<div class="slider">
  <ul>
    <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
  </ul>
  <!--箭头-->
  <div class="arrow">
    <span class="arrow-left"><</span>
    <span class="arrow-right">></span>
  </div>
</div>


<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    var count = 0;
    
    $(".arrow-right").click(function () {
      count  ;
      
      
      if(count == $(".slider li").length){
        count = 0;
      }
      console.log(count);
      //让count渐渐的显示，其他兄弟渐渐的隐藏
      $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
    });
    
    $(".arrow-left").click(function () {
      count--;
  
      if(count == -1){
        count = $(".slider li").length - 1;
      }
      console.log(count);
      //让count渐渐的显示，其他兄弟渐渐的隐藏
      $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
    })
    
  });
</script>

</body>
</html>
  • 　　自定义动画
代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
    }
    #box2 {
      background-color: blue;
      margin-top: 150px;
    }
    
    #box3 {
      background-color: yellowgreen;
      margin-top: 300px;
    }
  </style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    $("input").eq(0).click(function () {
      
      //第一个参数：对象，里面可以传需要动画的样式
      //第二个参数：speed 动画的执行时间
      //第三个参数：动画的执行效果
      //第四个参数：回调函数
      $("#box1").animate({left:800}, 8000);
      
      //swing:秋千 摇摆
      $("#box2").animate({left:800}, 8000, "swing");
      
      //linear:线性 匀速
      $("#box3").animate({left:800}, 8000, "linear", function () {
        console.log("hahaha");
      });
    })
  });
</script>
</body>
</html>

手风琴案例

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
      width: 1300px;
    }
    
    #box {
      width: 1200px;
      height: 400px;
      border: 2px solid red;
      margin: 100px auto;
    }
    
    #box li {
      width: 240px;
      height: 400px;
      /*border: 1px solid #000;*/
      float: left;
    }
  
  </style>
</head>
<body>
<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
  $(function () {
    var $li = $("#box li");
    
    for (var i = 0; i < $li.length; i  ) {
      $li.eq(i).css("backgroundImage", "url(images/"   (i   1)   ".jpg)");
    }
  
  
    //给所有的li注册鼠标经过事件
    $li.mouseenter(function () {
      $(this).stop().animate({width:800}).siblings().stop().animate({width:100});
    }).mouseleave(function () {
      $li.stop().animate({width:240});
    });
    
    
  });
</script>
</body>
</html>

　　动画队列

代码语言：javascript复制
$(function () {
    $("#btn").click(function () {
      
      //把这些动画存储到一个动画队列里面
      $("div").animate({left:800})
        .animate({top:400})
        .animate({width:300,height:300})
        .animate({top:0})
        .animate({left:0})
        .animate({width:100,height:100})
    })
  });

停止动画操作

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div></div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    $("input").eq(0).click(function () {
      $("div").slideDown(4000).slideUp(4000);
    });
    
    
    $("input").eq(1).click(function () {
      //stop:停止当前正在执行的动画
      //clearQueue:是否清除动画队列 true  false
      //jumpToEnd:是否跳转到当前动画的最终效果 true false
      
      
      //.stop().animate();
      $("div").stop(true, true);
    })
  });
</script>
</body>
</html>
动画 队列

0 人点赞