jQuery基础--动画操作

三组基本动画

<!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>

滑入滑出

<!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>

　　淡入淡出

<!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>

　　下拉菜单案例

<!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>

　　轮播图案例

<!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="data:images/1.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/6.jpg" alt=""></a></li>

    <li><a href="#"><img src="data:images/7.jpg" alt=""></a></li>

    <li><a href="#"><img src="data: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>

　　自定义动画

<!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>

手风琴案例

<!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>

　　动画队列

$(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})

    })

  });

停止动画操作

<!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>

巴特西

jQuery基础--动画操作

最新文章

热门文章