jq04--自定义动画animate()、hide()/show()/toggle()、slideUp()/slideDown()/slideToggle()、fadeIn()/fadeOut()
jq的动画实质是通过dom+自定义animate()（进行封装的最大的区别就是给它起了一个语义化的名称；api中的动画是把常用的封装好了我们直接调用即可，api中的动画基本上都是脱标）
1.animate(params,[speed],[easing],[fn]);自定义动画
参数详解：
params:一组包含作为动画属性和终值的样式属性和及其值的集合（必选，json的形式）
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
动画支持的属性：
http://www.w3school.com.cn/jquery/effect_animate.asp
执行过程为：speed秒内将params中的可行性执行完毕，然后再立即执行fn函数
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; height: 100px; line-height: 100px; background-color: pink; } </style> </head> <body> <div class="box"> https://blog.****.net/muzidigbig </div> </body> <script src="jquery-3.3.1.js"></script> <script> $('.box').click(function () { var params1 = {'marginLeft':'200px','height':'200px','borderRadius':'50%'}; var params2 = {'marginTop':'100px','height':'200px','opacity':'0'}; $(this).animate(params1,2000,function () { $(this).animate(params2,2000,function () { alert('自定义函数执行完毕！') }) }); }); </script> </html>
注意：
jQuery预设的三组动画效果的语法几乎一致：参数说明，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。
jq提供api
2. api动画--显示/隐藏/切换 show()/hide()/toggle();(隐藏，慢慢谈去)
show() 作用：让匹配的元素展示出来 控制元素的 高宽透明度
hide() 作用：让匹配元素隐藏掉 用法参考show方法
toggle() 切换可代替上面俩中方法（自行判断show()了则hide();hide()则show()）
// 用法一：
// 参数为数值类型，表示：执行动画时长
/* 单位为：毫秒（ms），参数2000即2秒钟显示完毕 */
$(selector).show(2000);
// 用法二：
// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
/* 跟用法一的对应关系为： */
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show(“slow”);
// 用法三：
// 参数一可以是数值类型或者字符串类型
// 参数二表示：动画执行完后立即执行的回调函数
$(selector).show(2000, function() {});
// 用法四：
// 不带参数，作用等同于 css(“display”,”block”)
/* 注意：此时没有动画效果 */
$(selector).show();
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; height: 200px; background-color: pink; } </style> </head> <body> <button class="hide">hide隐藏</button> <button class="show">show显示</button> <button class="toggle">show/hide切换</button> <div class="box"> <ul> <li>muzidigbig</li> <li>muzidigbig</li> <li>muzidigbig</li> <li>muzidigbig</li> </ul> </div> <p>你既然认准一条道路，何必去打听要走多久。</p> </body> <script src="jquery-3.3.1.js"></script> <script> $('.hide').click(function () { //不传参立即消失（脱标） // $('.box').hide(); //传一个参，多少秒后消失 // $('.box').hide(3000); //传2个参数，多少秒后执行后面的函数 // $('.box').hide(3000,function () { // alert('muzidigbig已隐藏！') // }); }); $('.show').click(function () { //传参同上 $('.box').show(3000); }); $('.toggle').click(function () { //传参同上 $('.box').toggle(3000); }); </script> </html>3. api动画--滑入/滑出/切换 slideUp()/slideDown()/slideToggle()（像生活中的卷门帘）
slideUp() 作用：让元素以上拉的动画效果隐藏起来
slideDown() 作用：让元素以下拉的动画效果展示起来
注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; height: 200px; background-color: pink; } </style> </head> <body> <button class="slideUp">slideUp隐藏</button> <button class="slideDown">slideDown显示</button> <button class="slideToggle">slideToggle显示</button> <button class="updown">up-down</button> <div class="box"> <ul> <li>muzidigbig</li> <li>muzidigbig</li> <li>muzidigbig</li> <li>muzidigbig</li> </ul> </div> <p>你既然认准一条道路，何必去打听要走多久。</p> </body> <script src="jquery-3.3.1.js"></script> <script> $('.slideUp').click(function () { $('.box').slideUp(2000); }); $('.slideDown').click(function () { $('.box').slideDown(2000); }); $('slideToggle').click(function () { $('.box').slideToggle(2000); }); $('.updown').click(function () { //delay()设置一个延时来推迟执行队列中之后的项目。 $('.box').slideUp(2000).delay(2000).slideDown(2000); }); </script> </html>
4. api动画--淡入淡出 fadeIn()/fadeOut()/fadeToggle()/fadeTo()
淡入淡出只能控制元素的不透明度从完全不透明到完全透明，并且时间参数是必需的！；而fadeTo可以指定元素不透明度的具体值。
fadeIn() 作用：让元素淡淡的进入视线的方式显示
fadeOut() 作用：让元素渐渐的从视线中消失
fadeToggle() 作用：通过改变透明度，切换匹配元素的动画效果
fadeTo() 作用：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
// 用法有别于其他动画效果
// 第一个参数表示：时长（必选）
// 第二个参数表示：不透明度值，取值范围：0-1
$(selector).fadeTo(1000, 0.5); // 0全透，1全不透
// 第一个参数为0，此时作用相当于：.css(“opacity”, .5);
$(selector).fadeTo(0, .5);
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; line-height: 200px; background-color: pink; } </style> </head> <body> <button class="fadeOut">fadeOut隐藏</button> <button class="fadeIn">fadeIn显示</button> <button class="fadeToggle">fadeToggle显示</button> <button class="fadeTo">fadeTo显示</button> <button class="outin">out--in</button> <div class="box"> https://blog.****.net/muzidigbig </div> <p>你既然认准一条道路，何必去打听要走多久。</p> </body> <script src="jquery-3.3.1.js"></script> <script> $('.fadeOut').click(function () { $('.box').fadeOut(2000); }); $('.fadeIn').click(function () { $('.box').fadeIn(2000); }); $('.fadeToggle').click(function () { $('.box').fadeToggle(2000); }); $('.fadeTo').click(function () { $('.box').fadeTo(2000,.5,function () { alert('我的透明度为0.5'); }); }); $('.outin').click(function () { //delay()设置一个延时来推迟执行队列中之后的项目。 $('.box').fadeOut(2000).delay(2000).fadeIn(2000); }); </script> </html>
重点：
5. delay() 设置一个延时来推迟执行队列中之后的动画。
delay(duration,[queueName])
duration:延时时间，单位：毫秒
queueName:队列名词，默认是Fx，动画队列。
6. stop() 停止所有在指定元素上正在运行的动画
如果多个动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站）
// 第一个参数表示后续动画是否要执行
（true:后续动画不执行 ;false:后续动画会执行）
// 第二个参数表示当前动画是否执行完
（true:立即执行完成当前动画 ;false:立即停止当前动画）
$(selector).stop(clearQueue,jumpToEnd);
都不给，默认false；
stop([queue],[clearQueue],[jumpToEnd])BooleanV1.7
queue:用来停止动画的队列名称
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
解释：
当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; line-height: 200px; background-color: pink; } </style> </head> <body> <button class="delay">delay延迟动画</button> <button class="stop">stop停止动画</button> <div class="box"> https://blog.****.net/muzidigbig </div> <p>你既然认准一条道路，何必去打听要走多久。</p> </body> <script src="jquery-3.3.1.js"></script> <script> $('.delay').click(function () { $('.box').fadeOut(2000).delay(2000).slideDown(2000); }); $('.stop').click(function () { $('.box').slideUp(2000).stop(false,false).slideDown(2000); }); </script> </html>