animate（）方法
用于创建自定义动画。
语法： $(selector).animate({params},speed,callback);
<!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> div{ width: 100px; height: 100px; background-color: greenyellow; position: relative; } </style> </head> <body> <button>点击开始动画</button> <div></div> <script src="../jquery-3.6.0.js"></script> <script> $(document).ready(function(){ $('button').click(function(){ $('div').animate({left:'250px'}); }) }) </script> </body> </html>
注意：在默认情况下，如果向移动某个元素的位置，那么就要把元素的position属性设置为relative、fixed或者absolute
效果如图：
使用animate()-操作多个属性
$(document).ready(function(){ $('button').click(function(){ $('div').animate({ left:'250px', opacity:'0.5', height:'200px', width:'200px' }); }); });
可以用animate()方法来操作所有的css样式吗？
基本都可以，只不过要用规定的语法去写相对应的属性名
例如：margin-top就要写成 marginTop 类似于驼峰命名法
如果想要彩色的动画，可以从官网下载插件，并不包含在jQuery库中
可以对animate()使用相对值
可以设置相对值（该元素的当前的值）。只需要在值的前面加上 += 或 -=
$(document).ready(function(){ $('button').click(function(){ $('div').animate({ left:'250px', width:'+=50px', //只需要在值的前面加上 += 或 -= height:'+=50px', }); }); });
可以对animate()使用预定义值
就是可以把动画的属性值设置成'show',"hide","toggle"实现动画效果
$(document).ready(function(){ $('button').click(function(){ $('div').animate({ height:'toggle', //设置"show"、"hide" 或 "toggle"也可以 }); }); });
效果如下：
还可以对 animate() 使用队列功能
就是可以呈现一个完整的动画效果
可以在这些方法中去调用的"内部"队列。然后一个个的调用运行这些 animate 。
$(document).ready(function(){ $('button').click(function(){ var div = $('div'); div.animate({ height:'300px' },'show'); div.animate({ width:'300px', fontSize:'30px' },'show'); div.animate({ height:'100px' },'show'); div.animate({ width:'100px', fontSize:'16px' },'show'); }); });
效果如下：
停止动画 stop()
用来中途暂停动画的执行
<!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>jquery-stop()停止动画</title> <style> #div1{ width: 100%; height: 30px; background-color: gray; text-align: center; } #div2{ width: 100%; height: 300px; background-color: greenyellow; text-align: center;padding-top: 135px; box-sizing: border-box; display: none; } </style> </head> <body> <button>停止按钮</button> <div id="div1">点击下滑整个盒子</div> <div id="div2">这是一个大盒子</div> <script src="../jquery-3.6.0.js"></script> <script> // 语法$(selector).stop(stopAll,goToEnd); $(document).ready(function(){ $('#div1').click(function(){ $('#div2').slideDown(5000); }),$('button').click(function(){ $('#div2').stop(); }); }) </script> </body> </html>
卷帘动画效果实现：
<!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> #div1{ width: 100%; height: 30px; background-color: gray; text-align: center; } #div2{ width: 100%; height: 300px; background-color: greenyellow; text-align: center; padding-top: 135px; box-sizing: border-box; display: none; } </style> </head> <body> <button>停止按钮</button> <div id="div1">点击下滑整个盒子</div> <div id="div2">这是一个大盒子</div> <script src="../jquery-3.6.0.js"></script> <script> // 语法$(selector).stop(stopAll,goToEnd); $(document).ready(function(){ $('#div1').click(function(){ $('#div2').slideDown(5000); $('#div2').slideUp(5000); //动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行： }),$('button').click(function(){ $('#div2').stop();//可以在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画： }); }) </script> </body> </html>
效果如下
