jQuery之动画
滑动
说明：
不断改变元素的高度来实现的。
方法：
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>
