jQuery之動畫
阿新 • • 發佈：2020-07-11
滑動
說明：
不斷改變元素的高度來實現的。
方法：
slideDown()：帶動畫的展開。
slideUp()：帶動畫的收縮。
slideToggle()：帶動畫的切換展開/收縮。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑動</title> <style type="text/css"> * { margin: 0px; }.div1 { position: absolute; width: 200px; height: 200px; top: 50px; left: 10px; background: red; } </style> </head> <body> <button id="btn1">慢慢收縮</button> <button id="btn2">慢慢展開</button> <button id="btn3">收縮/展開切換</button> <div class="div1"> </div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求： * 1.點選btn1，向上滑動 * 2.點選btn3，向下滑動 * 3.點選btn3，向上/向下切換 */ $(function (){ //1.點選btn1，向上滑動 $('#btn1').click(function () { $('div').slideUp() }); //2.點選btn3，向下滑動 $('#btn2').click(function () { $('div').slideDown() }); //3.點選btn3，向上/向下切換 $('#btn3').click(function () { $('div').slideToggle(2000) }); }); </script> </body> </html>
淡入淡出
說明：
不斷改變元素的透明度來實現的。
方法：
fadeIn()：帶動畫的顯示。
fadeOut()：帶動畫隱藏。
fadeToggle()：帶動畫切換顯示/隱藏。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淡入淡出</title> <style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 50px; left: 10px; background: red; } </style> </head> <body> <button id="btn1">慢慢淡出</button> <button id="btn2">慢慢淡入</button> <button id="btn3">淡出/淡入切換</button> <div class="div1"> </div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求： * 1.點選btn1，慢慢淡出 * 無參 * 有參： * 字串引數 * 數字引數 * 2.點選btn3，慢慢淡入 * 3.點選btn3，淡出/淡入切換，動畫結束時提示動畫結束了 * */ $(function (){ //1.點選btn1，實現慢慢淡出 $('#btn1').click(function () { //$('.div1').fadeOut(); //$('.div1').fadeOut(1000); $('.div1').fadeOut('fast'); /* * fast：200 * normal：400 * fast：600 */ }); //2.點選btn3，實現慢慢淡入 $('#btn2').click(function () { $('.div1').fadeIn(); }); //3.點選btn3，實現淡出/淡入切換 $('#btn3').click(function () { $('.div1').fadeToggle(function () { alert('動畫結束了'); }) }); }); </script> </body> </html>
顯示/隱藏
說明：
不斷改變元素的尺寸和透明度來實現，顯示隱藏，預設沒有動畫。
方法：
show()：(不)帶動畫的顯示。
hide()：(不)帶動畫的隱藏。
toggle()：(不)帶動畫的切換顯示/隱藏。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>顯示與隱藏</title> <style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 50px; left: 10px; background: red; display: none; } </style> </head> <body> <button id="btn1">瞬間顯示</button> <button id="btn2">慢慢顯示</button> <button id="btn3">慢慢隱藏</button> <button id="btn4">顯示隱藏切換</button> <div class="div1"> </div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求： * 1.點選btn1，立即顯示 * 2.點選btn2，慢慢顯示 * 3.點選btn3，慢慢隱藏 * 4.點選btn4，切換顯示/隱藏 */ $(function (){ //1.點選btn1，立即顯示 $('#btn1').click(function () { $('div').show(); }); //2.點選btn2，慢慢顯示 $('#btn2').click(function () { $('div').show(1000); }); //3.點選btn3，慢慢隱藏 $('#btn3').click(function () { $('div').hide(2000); }); //4.點選btn4，切換顯示/隱藏 $('#btn4').click(function () { $('div').toggle(); }); }); </script> </body> </html>
自定義
說明：
jQuery動畫本質是在指定時間內不斷改變元素樣式值來實現的。
方法：
animate()：自定義動畫效果的動畫。
stop()：停止動畫。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定義動畫</title> <style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 100px; height: 100px; top: 50px; left: 300px; background: red; } </style> </head> <body> <button id="btn1">逐漸擴大</button> <button id="btn2">移動到指定位置</button> <button id="btn3">移動指定距離</button> <button id="btn4">停止動畫</button> <div class="div1"> 愛在西元前 </div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求： * 1.逐漸擴大 * 1)寬/高都擴為200px * 2)寬先擴為200px，高後擴為200px * 2.移動到指定位置 * 1)移動到(500, 100)處 * 2)移動到(100, 20)處 * 3.移動指定的距離 * 1)移動距離為(100, 50) * 2)移動距離為(-100, -20) * 4.停止動畫 */ var $div1 = $('.div1'); /* * 1.逐漸擴大 * 1)寬/高都擴為200px * 2)寬先擴為200px，高後擴為200px */ $('#btn1').click(function () { //寬/高都擴為200px $div1.animate({ width: 200, height: '200px' }, 1000); //寬先擴為200px，高後擴為200px $div1.animate({ width: 200 }, 2000) .animate({ height: 200 }, 2000); }); /* * 2.移動到指定位置 * 1)移動到(500, 100)處 * 2)移動到(100, 20)處 */ $('#btn2').click(function () { //移動到(500, 100)處 $div1.animate({ left: 500, top: 100 }, 1000); //移動到(100, 20)處 $div1.animate({ left: 100, top: 20 }, 1000); }); /* * 3.移動指定的距離 * 1)移動距離為(100, 50) * 2)移動距離為(-100, -20) */ $('#btn3').click(function () { //移動距離為(100, 50) $div1.animate({ left: '+=100', top: '+=50' }, 1000); //移動距離為(-100, -20) $div1.animate({ left: '-=100', top: '-=20' }, 1000) }); /* * 4.停止動畫 */ $('#btn4').click(function () { $div1.stop();//只停止當前執行的動畫(後面其它動畫還會執行) //$div1.stop(true);//停止所有動畫 //$div1.stop(true, true); }); </script> </body> </html>