文章目录

jQuery三组基本动画

  show不传参数，没有动画效果
  $("div").show();
  
  show(speed)
  speed:动画的持续时间  可以是毫秒值 还可以是固定字符串
  fast:200ms   normal:400ms   slow:600
  $("div").show("ddd");

动画展示

<!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([speed], [callback])
      $("div").show(1000, function () {
        console.log("哈哈，动画执行完成啦");
      })
    });
    
    $("input").eq(1).click(function () {
      $("div").hide();
    })
  });
</script>
</body>
</html>

1、滑入滑出动画

滑入（slideDown）
滑出：slideU

<!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="来来回回">
<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(2000, function () {
        console.log("我滑走了 哈哈哈   这句话打印用两秒")
      });
      
    })

    $("input").eq(2).click(function () {
      $('div').slideUp(1000);
      $("div").slideDown(2000, function () {
        console.log("我滑走又回来了 哈哈哈   这句话打印用两秒")
      });
      
    })
  
  
    $("input").eq(3).click(function () {
      
      //如果是滑入状态，就执行滑出的动画，
      $('div').slideToggle();
    })
  });
</script>
</body>
</html>

2、淡入淡出动画

淡入：fadeIn
淡出：fadeOut
切换：fadeToggle （如果是滑入状态，就执行滑出的动画，反之一样）人家就是这样用的你别犟这就是个封装好的方法，不用管别的我天

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

3、自定义动画

animate（）

第一个参数：对象，里面可以传需要动画的样式
第二个参数：speed 动画的执行时间
第三个参数：动画的执行效果
第四个参数：回调函数

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

jQuery动画队列

把这些动画存储到一个动画队列里面，构成一组动画，来完成一套动作

animate（）. animate()

<!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;
    }
  </style>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div></div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(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})
    })
  });
</script>
</body>
</html>

jQuery停止动画

三种方法：

stop:停止当前正在执行的动画
clearQueue:是否清除动画队列 true false
jumpToEnd:是否跳转到当前动画的最终效果 true false

.stop().animate();

<!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动画案例

京东轮播图

https://yangyongli.blog.csdn.net/article/details/113174943

仿小米手风琴案例

https://yangyongli.blog.csdn.net/article/details/113175216

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。