显示效果
show(speed,callback)
- speed：三种预定义字符串之一（slow，normal，fast）或时间“毫秒”
- callback：动画执行完后运行的函数，每个元素执行一次
hide(speed,callback)
- 与show()方法类似
toggle(speed,callback)
- 如果元素可见，切换为隐藏。如果隐藏，切换为可见
- speed为执行时间
- callback为回调元素，只执行一
slide效果
slideDown()
- 通过高度变化（向下增大）来达到动态地显示所有匹配的元素，在显示完成后触发一个回调函数
slideUp()
- 通过高度变化（向上减少）来达到动态地隐藏所有匹配的元素，在隐藏完成后触发一个回调函数
sildeToggle()
- 通过高度变化，来切换所匹配元素的可见性，并在切换完成之后触发一个回调函数
fade效果
fadeIn
- 通过对透明元素调整透明度的变化来达到淡入效果，在动画执行完成后执行回调函数，只调整透明度
fadeOut
- 通过对不透明元素调整透明度的变化来达到淡出效果，在动画执行完成后执行回调函数，只调整透明度
fadeTo
- 把匹配到的元素的透明度以渐进的方式调整到指定的透明度，并在动画完成后执行回调函数
fadeToggle
- 通过不透明的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后执行回调函数。实现淡入淡出的效果就用此方法。只调整透明度，不调整宽和高
动画
animate(params,speed,fn)
- params：一组包含作为动画属性和终止的样式属性及其值的集合
- speed：三种预定义速度之一的字符串（'slow','normal','fast'）或动画时长毫秒数值
- fn：在动画完成后的函数，每个回调只执行一次
链式执行动画，多个animate连续执行
<script type="text/javascript"> $(function () { $("#btn").click(function () { $("#box").animate({ "200px", height:"200px", top:"135px", left:"100px" },1000).animate({ "100px", height:"100px", top:"35px", left:"0px" },1000) }) }) </script>
stop：停止所有在指定元素上进行的动画
- clearQueue:True则清空队列，可以立即结束动画
- gotoEnd：让当前正在执行的动画立即完成，重设show和hide原始样式，调用回调函数等
暂停动画执行
<script type="text/javascript"> $(function () { $("#str").click(function () { $("#box").animate({top:"135px",left:"100px"},5000); }) $("#stop").click(function () { $("#box").stop(); }) }) </script>
delay：用来做延迟操作
- delay(1000)，一秒之后所做的操作
第一个动画执行完毕后，暂停3秒后，继续执行
<script type="text/javascript"> $(function () { $("#str").click(function () { $("#box").animate({"200px",height:"200px",top:"135px",left:"100px"},5000).delay(3000).animate({top:"35px",left:"0px"},2000); }) }) </script>
演示代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script src="js/jquery-3.3.1.js"></script> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ width: 100px; height: 100px; border: 1px solid green; background-color: seagreen; position: absolute;/*就可设置top和left值*/ line-height: 100px; top: 35px; text-align: center; } </style> </head> <body> <button id="str">动</button> <button id="stop">停</button> <div id="box"> Hello！ </div> </body> <script type="text/javascript"> $(function () { $("#str").click(function () { /*$("#box").animate({ "200px", height:"200px", top:"135px", left:"100px" },1000).animate({ "100px", height:"100px", top:"35px", left:"0px" },1000)*/ $("#box").animate({"200px",height:"200px",top:"135px",left:"100px"},5000).delay(3000).animate({top:"35px",left:"0px"},2000); }) /*$("#stop").click(function () { $("#box").stop(); })*/ }) </script> </html>
小广告案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery属性操作</title> <script src="js/jquery-3.3.1.js"></script> <style type="text/css"> #box{ width: 300px; height: 240px; position: absolute; right: 10px; bottom: 10px; display: none; } img{ width: 100%; height: 100%; } </style> </head> <body> <div id="box"> <img src="img/advertising.jpg"/> </div> </body> <script type="text/javascript"> $(function () { $("#box").slideDown("normal").slideUp("flast").fadeIn(1000).click(function () { $(this).fadeOut(1000) }) }) </script> </html>