动画操作也是jquery一个很突出的点，特别方法，赶紧学习一下吧：动画jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。动画的显示和隐藏+
动画操作也是jquery一个很突出的点，特别方法，赶紧学习一下吧：
动画
- jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
动画的显示和隐藏
+_ show()_:让匹配的元素展示出来
//第一种： 带参，一个参数，数值，毫秒值。$("button:eq(0)").click(function () { //显示盒子 $("div").show(1000); //所有属性在1秒内变为初始化值。display: block;});//第二种； 带参，一个参数，字符串，slow,normal,fast。600/400/200$("button:eq(0)").click(function () { //显示盒子 $("div").show("normal"); //所有属性在1秒内变为初始化值。display: block;});//第三种； 带参，两个参数，时间和回调函数$("button:eq(0)").click(function () { //显示盒子 $("div").show(1000, function () { alert("动画执行完毕！"); $("div").hide(); }); //所有属性在1秒内变为初始化值。display: block;});//第四种； 无参，类似$("div").css("display","block");$("button:eq(0)").click(function () { //显示盒子 $("div").show(); //所有属性在1秒内变为初始化值。display: block; $("div").css("display","block"); //所有属性在1秒内变为初始化值。display: block;});- hide():让匹配的元素隐藏掉
//第一种；带参，一个参数，数值，毫秒值。$("button:eq(1)").click(function () { //隐藏盒子 $("div").hide(1000); //所有属性在1秒内变为初始化值。display: block;});//第二种； 带参，一个参数，字符串，slow,normal,fast。600/400/200$("button:eq(1)").click(function () { //隐藏盒子 $("div").hide("fast"); //所有属性在1秒内变为初始化值。display: block;});//第三种； 带参，两个参数，时间和回调函数$("button:eq(1)").click(function () { //隐藏盒子 $("div").hide(1000, function () { alert("动画执行完毕！"); $("div").show(); }); //所有属性在1秒内变为初始化值。display: block;});//第四种； 无参，类似$("div").css("display","none");$("button:eq(1)").click(function () { //隐藏盒子 $("div").hide(); //所有属性在1秒内变为初始化值。display: block; $("div").css("display","none"); //所有属性在1秒内变为初始化值。display: block;});- toggle():切换匹配的元素
//第一种； 带参，一个参数，数值，毫秒值。$("button:eq(2)").click(function () { //切换盒子状态 $("div").toggle(1000); //切换});//第二种； 带参，一个参数，字符串，slow,normal,fast。600/400/200$("button:eq(2)").click(function () { //切换盒子状态 $("div").toggle("fast"); //切换});//第三种； 带参，两个参数，时间和回调函数$("button:eq(2)").click(function () { //切换盒子状态 $("div").toggle(1000, function () { alert("动画执行完毕！"); }); //切换});//第四种； 无参$("button:eq(2)").click(function () { //切换盒子状态 $("div").toggle(); //切换});动画的滑入和滑出
- 滑入_slideDown()_：让元素以下拉动画效果展示出来
//第一种； 带参，一个参数，数值，毫秒值。$("button:eq(0)").click(function () { //滑入 $("div").slideDown(1000);});//第二种； 带参，一个参数，字符串，slow,normal,fast。600/400/200$("button:eq(0)").click(function () { //滑入 $("div").slideDown("fast");});//第三种； 带参，两个参数，时间和回调函数$("button:eq(0)").click(function () { //滑入 $("div").slideDown(1000, function () { alert("动画执行完毕！"); });});//第四种； 无参$("button:eq(0)").click(function () { //正常速度滑出 $("div").slideDown();});- 滑出_slideUp()_:让元素以上拉动画效果隐藏起来
//第一种； 带参，一个参数，数值，毫秒值。$("button:eq(1)").click(function () { //滑出 $("div").slideUp(1000);});//第二种； 带参，一个参数，字符串，slow,normal,fast。600/400/200$("button:eq(1)").click(function () { //滑出 $("div").slideUp("fast");});//第三种； 带参，两个参数，时间和回调函数$("button:eq(1)").click(function () { //滑出 $("div").slideUp(1000, function () { alert("动画执行完毕！"); });});//第四种； 无参$("button:eq(1)").click(function () { //正常速度滑出 $("div").slideUp();});- 切换_slideToggle()_:滑入滑出切换动画效果
//第一种； 带参，一个参数，数值，毫秒值。$("button:eq(2)").click(function () { //切换 $("div").slideToggle(1000);});//第二种； 带参，一个参数，字符串，slow,normal,fast。600/400/200$("button:eq(2)").click(function () { //切换 $("div").slideToggle("fast");});//第三种； 带参，两个参数，时间和回调函数$("button:eq(2)").click(function () { //切换 $("div").slideToggle(1000, function () { alert("动画执行完毕！"); });});//第四种； 无参$("button:eq(2)").click(function () { //切换 $("div").slideToggle();});动画的淡入和淡出和淡至
- 淡入_fadeIn()_:让元素以淡淡的进入视线的方式展示出来
//第一种； 带参，一个参数，数值，毫秒值。$("button:eq(0)").click(function () { //淡入 $("div").fadeIn(1000);});//第二种； 带参，一个参数，字符串，slow,normal,fast。600/400/200$("button:eq(0)").click(function () { //淡入 $("div").fadeIn("fast");});//第三种； 带参，两个参数，时间和回调函数$("button:eq(0)").click(function () { //淡入 $("div").fadeIn(2000, function () { alert("动画执行完毕！"); });});//第四种； 无参$("button:eq(0)").click(function () { //正常速度淡入 $("div").fadeIn();});- 淡出_fadeOut()_:让元素以渐渐消失的方式隐藏起来
//第一种； 带参，一个参数，数值，毫秒值。$("button:eq(1)").click(function () { //淡出 $("div").fadeOut(1000);});//第二种； 带参，一个参数，字符串，slow,normal,fast。600/400/200$("button:eq(1)").click(function () { //淡出 $("div").fadeOut("fast");});//第三种； 带参，两个参数，时间和回调函数$("button:eq(1)").click(function () { //淡出 $("div").fadeOut(2000, function () { alert("动画执行完毕！"); });});//第四种； 无参$("button:eq(1)").click(function () { //正常速度淡出 $("div").fadeOut();});- 切换_fadeToggle()_:通过改变透明度，切换匹配元素的显示或隐藏状态
//第一种； 带参，一个参数，数值，毫秒值。$("button:eq(2)").click(function () { //切换 $("div").fadeToggle(2000);});//第二种； 带参，一个参数，字符串，slow,normal,fast。600/400/200$("button:eq(2)").click(function () { //切换 $("div").fadeToggle("fast");});//第三种； 带参，两个参数，时间和回调函数$("button:eq(2)").click(function () { //切换 $("div").fadeToggle(1000, function () { alert("动画执行完毕！"); });});//第四种； 无参$("button:eq(2)").click(function () { //正常速度切换 $("div").fadeToggle();});注意：除此之外，fade还有一个是淡至，改变透明度到某个值。与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
淡至_fadeTo()_:调节匹配元素的不透明度
//第一种；$("button:eq(3)").click(function () { //正常速度切换 $("div").fadeTo(1000,0.5);});//第二种；$("button:eq(3)").click(function () { //正常速度切换 $("div").fadeTo(1000,0.5, function () { alert("动画执行完毕！"); });});动画总结
自定义动画
- 所有能够执行动画的属性必须只有一个数字类型的值。
- 要改变字体大小，要使用：fontSize（font-size），不要使用：font
//一种； 带参，两个或三个参数，json时间和回调函数。$("button:eq(0)").click(function () { var json1 = {"width":50,"height":50,"border-radius":25,"top":300,"left":300} var json2 = {"width":100,"height":50,"border-radius":0,"top":100,"left":30,"background":"red"} //两个或三个参数，json时间和回调函数。 $("div").animate(json1,2000, function () { $("div").animate(json2,2000, function () { alert("函数执行完毕！"); }); });});停止动画
- stop():停止当前正在执行的动画
- 如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站）
- 动画队列里面的动画不会执行，直到第一个动画执行完成。
// 第一个参数表示是否清空所有的后续动画// 第二个参数表示是否立即执行完当前正在执行的动画// 第一个参数表示后续动画是否要停止//（true:后续动画不执行;false:后续动画会执行）// 第二个参数表示当前动画是否执行完完毕//（true:立即执行完成当前动画 ;false:立即停止当前动画）$(selector).stop(clearQueue,jumpToEnd);- 看一看
//滑入滑出$("button:eq(0)").click(function () { //正常速度滑出 $("div").slideToggle(2000);});//停止动画$("button:eq(1)").click(function () { //停止动画,什么都不写，默认为两个参数都是false； //当前动画立刻停止，后续动画照样执行。 $("div").stop(); // 第一个参数表示后续动画是否要停止 //（true:后续动画不执行;false:后续动画会执行） // 第二个参数表示当前动画是否执行完完毕 //（true:立即执行完成当前动画;false:立即停止当前动画） //false，false； 后续动画会执行，立即停止当前动画 $("div").stop(false,false); //false，true； 后续动画会执行，立即执行完成当前动画 $("div").stop(false,true); //true，false； 后续动画不执行，立即停止当前动画 $("div").stop(true,false); //true，false； 后续动画不执行，立即执行完成当前动画 $("div").stop(true,true);});- 如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
注意点
- 为了避免冒泡，使用mouseenter和mouseleave代替mouseover和mouseout。
- opacity透明度和rgba透明度有什么不同？
- opacity作用于元素，以及元素内所有内容的透明度。
- rgba只作用于元素的颜色或者背景色。设置rgba透明的元素的子元素不会继承透明效果。
- show()/hide()/slideDown()/slideUp()/fadeIn()/fadeOut()/fadeTo()不会把之前定义的方法层叠掉，先定义的先执行。
如果本文有什么错误，欢迎留言指正！希望看到本文的您，看完本文会您有所帮助！如果觉得还不错，点个赞哦！
