jQuery（五）--自定义动画、动画

一、自定义动画

1.1 animate()

1.2 animate()动画执行顺序

1.3 animate()动画回调函数和匀速运动

1.4 animate动画之stop()/delay()

二、动画

2.1 show()/hide()/toggle()

2.2 slideDown()/slideUp()/slideToggle()

2.3 fadeIn()/fadeOut()/fadeTo()/fadeToggle()

一、自定义动画

1.1 animate()

描述：jq对象的自定义动画

语法：jq对象.animate(JSON格式的参数，动画执行时间ms，["linear"/"swing"]，fn)

参数：它有四个参数

第一个参数是JSON，表示动画的终点（就是这个函数要变成什么样子）即CSS样式
第二个参数是动画执行完毕所需的时间
第三个参数是指定动画节奏，也就是速度变化，比如：linear
第四个参数是自定义动画执行完毕之后的回调函数

注意：即使只有一个属性发生动画，也要写JSON，而不能写k,v形式

例如：

<script>$("div").animate({"left": 300,"top": 200,"right": 50},2000,function() {//自定义动画执行完毕之后的回调函数});
</script>

例子1：

公共部分：

 <style>div {width: 100px;height: 100px;background-color: orange;position: absolute;}
</style>

<div></div>

<script>$('div').click(function() {// 向右移动$(this).animate({"left": 800,// "width": "hide/toggle", 关键字"width": "200px","height": "200px","top": 100}, 2000).animate({ //向左移动"left": 0,"width": "100px","height": "100px","top": 0,"opacity": 0.5}, 2000);})
</script>

当点击div区域后：

局限性：animate()能够改变的是量化的属性

例子：

 <script>$("div").animate({"background-color": "blue"}, 2000);</script>

执行结果发现div的背景颜色并没有在2秒钟内发生一个动画变化。所以很显然jQuery对于相当一部分的属性是不能够进行动画的。至少现在不行。而我们今天并不关心什么属性能动画，我们关心的是不能变化的属性：background-color、background-position不能参与动画！！！
jQuery能够改变的属性都是数值型的，比如width、height、font-size、opacity等

1.2 animate()动画执行顺序

jq中动画的执行遵循两大原则：

公共部分：

<style>div {width: 100px;height: 100px;background-color: orange;position: absolute}.div2 {top: 150px;}
</style>

    <div class="div1"></div><div  class="div2"></div>

同步原则：同一个元素如果存在多个animate命令，则按照添加顺序执行

 <script>$('div').animate({"left": 800}, 2000).animate({"width": 200}, 2000).animate({"height": 200}, 2000);</script>

异步原则：不同元素如果存在多个animate命令，则他们同时执行

 <script>$('.div1').animate({"left": 800}, 2000);$('.div2').animate({"left": 800}, 2000);</script>

注意：

对于一个jq对象而言，一个animate完成动画效果和多个animate分别完成动画效果完全不等价

 <script>//执行2000ms$('div').animate({"left": 800,"width": 200,"height": 200}, 2000);//不等价//执行6000ms$('div').animate({"left": 800}, 2000).animate({"width": 200}, 2000).animate({"height": 200}, 2000);
</script>

例子：

<script>$('div').animate({"left": 800}, 600).animate({"top": 400}, 600).animate({"left": 100}, 600).animate({"top": 100}, 600).slideUp().fadeIn();
</script>

1.3 animate()动画回调函数和匀速运动

公共部分：

     <script src="js/jquery-1.12.3.min.js"></script><style>div {width: 100px;height: 100px;background-color: orange;position: absolute}.div2 {top: 150px;}</style>

    <div class="div1"></div><div class="div2"></div>

1.回调函数(可选参数)

描述：表示animate执行完之后，要干什么

在回调函数中 $(this) 指的是运动的对象

<script>$('div').animate({"left": 800}, 5000, function() {$(this).css("background-color", "blue");});
</script>

2.匀速运动（可选参数）

描述：jQuery的运动不是匀速的，而是先加速然后到终点缓慢减速。

那么我们如果想进行匀速运动，就需要加一个参数叫做"linear"(线性的)。

  <script>$('.div1').animate({"left": 800}, 3000, function() {$(this).css("background-color", "blue");});$('.div2').animate({"left": 800}, 3000, "linear", function() {$(this).css("background-color", "blue");});</script>

1.4 animate动画之stop()/delay()

公共部分：

<script src="js/jquery-1.8.3.js"></script>

       * {margin: 0;padding: 0;}.one {width: 100px;height: 100px;background: orange;}.two {width: 500px;height: 10px;background: #f40;}

    <button>开始动画</button><button>停止动画</button><div class="one"></div><div class="two"></div>

1.4.1 delay()

用于高速度系统动画延迟时长

        $(function() {$("button").eq(0).click(function() {$(".one").animate({width: 400,}, 1000).delay(1000).animate({height: 260});});$("button").eq(1).click(function() {});});

1.4.2 stop()

stop(clearAllAnimation,goToEnd)

说明：

第一个参数表示是否清除所有动画，默认为false表示不清除所有动画（只清除当前动画）
第二个参数表示是否瞬间完成当前动画（达到动画结束的状态），默认为false表示不立即完成当前动画

        $(function() {$("button").eq(0).click(function() {$(".one").animate({width: 400,}, 1000)$(".one").animate({height: 260}, 1000)$(".one").animate({width: 100,}, 1000)$(".one").animate({height: 100,}, 1000);});$("button").eq(1).click(function() {// $("div").stop(); //立即停止当前动画，继续执行后续动画// $("div").stop(false); //立即停止当前动画，继续执行后续动画// $("div").stop(false, false); //立即停止当前动画，继续执行后续动画// $("div").stop(true); //立即停止当前和后续所有的动画// $("div").stop(true, false); //立即停止当前和后续所有的动画// $("div").stop(false, true); //立即停止当前动画，继续执行后续动画$("div").stop(true, true); //立即完成当前动画，并且停止后续动画});});

二、动画

<script src="js/jquery-1.8.3.js"></script>

2.1 show()/hide()/toggle()

都可接收两个参数，第一个参数表示执行所需的时间单位为毫秒；第二个参数表示执行完毕之后的回调函数

        * {margin: 0;padding: 0;}div {width: 200px;height: 200px;background: orange;display: none;}

    <button>显示</button><button>隐藏</button><button>切换</button><div></div>

        $(function() {//显示$("button").eq(0).click(function() {$("div").show(1000, function() {//动画执行完毕之后调用});});//隐藏$("button").eq(1).click(function() {$("div").hide(1000, function() {//动画执行完毕之后调用});});//切换$("button").eq(2).click(function() {$("div").toggle(1000, function() {//动画执行完毕之后调用});});});

2.2 slideDown()/slideUp()/slideToggle()

都可接收两个参数，第一个参数表示执行所需的时间单位为毫秒；第二个参数表示执行完毕之后的回调函数

        * {margin: 0;padding: 0;}div {width: 200px;height: 200px;background: orange;display: none;}

    <button>展开</button><button>收起</button><button>切换</button><div></div>

        $(function() {//显示$("button").eq(0).click(function() {$("div").slideDown(1000, function() {//动画执行完毕之后调用});});//隐藏$("button").eq(1).click(function() {$("div").slideUp(1000, function() {//动画执行完毕之后调用});});//切换$("button").eq(2).click(function() {$("div").slideToggle(1000, function() {//动画执行完毕之后调用});});});

2.3 fadeIn()/fadeOut()/fadeTo()/fadeToggle()

        * {margin: 0;padding: 0;}div {width: 200px;height: 300px;background: red;display: none;}

    <button>淡入</button><button>淡出</button><button>切换</button><button>淡入到</button><div></div>

        $(function() {//淡入$("button").eq(0).click(function() {$("div").fadeIn(1000, function() {});});//淡出$("button").eq(1).click(function() {$("div").fadeOut(1000, function() {});});//切换$("button").eq(2).click(function() {$("div").fadeToggle(1000, function() {});});//淡入到$("button").eq(3).click(function() {$("div").fadeTo(1000, 0.5, function() {});});});

轮播图示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;}ul,li {list-style: none;}/* 轮播图 */.banner {width: 650px;height: 360px;margin: 20px auto;overflow: hidden;position: relative;}.banner ul {width: 4000px;height: 360px;display: flex;}.banner > img {vertical-align: bottom;}/* 左右切换按钮 */.toggle {position: absolute;width: 100%;left: 0;top: 50%;transform: translateY(-50%);display: flex;justify-content: space-between;}/* 设置左右按钮的样式 */.toggle span {display: inline-block;width: 30px;height: 60px;background: rgba(0, 0, 0, 0.5);line-height: 60px;text-align: center;font-size: 40px;color: #fff;}/* 设置左右按钮的 hover 效果 */.toggle span:hover {cursor: pointer;background: rgb(231, 140, 20);}/* 指示点 */.point {width: 50%;height: 20px;position: absolute;bottom: 20px;left: 45%;z-index: 999;display: flex;justify-content: space-between;}.point div {width: 10%;height: 20px;background-color: aquamarine;border-radius: 10px;cursor: pointer;}.point .active {background-color: #f40;width: 15%;}</style></head><body><div class="banner"><ul class="ul"><li><img src="data:images/beijing/0.jpg" alt="" /></li><li><img src="data:images/beijing/1.jpg" alt="" /></li><li><img src="data:images/beijing/2.jpg" alt="" /></li><li><img src="data:images/beijing/3.jpg" alt="" /></li><li><img src="data:images/beijing/4.jpg" alt="" /></li><li><img src="data:images/beijing/0.jpg" alt="" /></li></ul><!-- 左右切换按钮 --><div class="toggle"><span id="pre">&lt;</span><span id="next">&gt;</span></div><!-- 指示点 --><div class="point"><div data-id="0" class="active"></div><div data-id="1"></div><div data-id="2"></div><div data-id="3"></div><div data-id="4"></div></div></div><script src="../Jquery/jquery-3.6.0.js"></script><script>// 0. 用来表示目前正在查看的图片序号let index = 0;// 1. 设置定时器，让 ul 在 1000ms 内向左移动一定距离let timer = setInterval(lunbo, 1000);//   封装轮播函数function lunbo() {// 当前轮播图片为最后一张时，让当前的图片变为第一张即index=0index++;let left = -index * 650 + "px";// 将所有的 div 都恢复为原来的背景色$(".point div").css("backgroundColor", "aquamarine").animate({ width: "10%" }, 100);// 通过 index 去设置当前 指示点 的背景颜色$(`.point div:eq(${index == 5 ? 0 : index})`).css("backgroundColor", "#f40").animate({ width: "15%" }, 100);/*** 当 index 为 4 时，我们需要正常去进行加加，加到5* 使其切换到下一张，切换到下一张这个动画效果在完毕之后* 我们应该使整个ul的margin-left变为0*/$(".ul").animate({ marginLeft: left }, 500, function () {if (index == 5) {$(".ul").css("marginLeft", "0px");index = 0;}});}/*** 2.* 当鼠标移动到图片上时，图片暂停轮播* 当鼠标移开时，轮播继续*/$(".banner").mouseenter(function () {clearInterval(timer);});$(".banner").mouseleave(function () {timer = setInterval(lunbo, 1000);});/*** 3.* 给指示点添加点击事件*/$(".point div").click(function () {let id = parseInt($(this).attr("data-id"));//  将 id 赋值给 index，这样下一张的切换才能接着上一张进行index = id;let left = -index * 650 + "px";$(".ul").animate({ marginLeft: left }, 500);// 将所有的 div 都恢复为原来的背景色$(".point div").css("backgroundColor", "aquamarine").animate({ width: "10%" }, 100);// 通过 index 去设置当前 指示点 的背景颜色// $(`.point div:eq(${index})`).css(//   "backgroundColor",//   "#f40"// ); 或$(this).css("backgroundColor", "#f40").animate({ width: "15%" }, 100);});/*** 4. 点击 左 按钮进行切换*/$("#pre").click(function () {index--;// console.log(index); // -1if (index < 0) {index = 4;$(".ul").css("marginLeft", (-index * 650) + "px" );}let left = -index * 650 + "px";$(".ul").animate({ marginLeft: left }, 500);$(".point div").css("backgroundColor", "aquamarine").animate({ width: "10%" }, 100);$(`.point div:eq(${index})`).css("backgroundColor", "#f40").animate({ width: "15%" }, 100);});/*** 5. 点击 右 按钮进行切换*/$("#next").click(function () {index++;if (index == 5) {$(".ul").css("marginLeft", "0px");index = 0;}let left = -index * 650 + "px";$(".ul").animate({ marginLeft: left }, 500);$(".point div").css("backgroundColor", "aquamarine").animate({ width: "10%" }, 100);$(`.point div:eq(${index})`).css("backgroundColor", "#f40").animate({ width: "15%" }, 100);});</script></body>
</html>