开发者学堂课程【jQuery 开发教程：jQuery 特效自定义1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4310
jQuery 特效自定义1
一、 jQuery特效自定义1
首先创建一个 HTML 文件，animate 文件名
<!DOCTYPE html> <html lang= "en"> <head> <meta charset="UTF-8""> <title></title> //引入jquery <script src="jquery-2.2.1.min.js"></script> //样式设置 <style> div{ width; 200px; height; 200px; background-color: aquamarine; position: absolute; } </styLe> </head> <body> <div></div> //js代码 <script> //文档加载 $ (function(){ //div点击事件 $("div"). click(function(){ //动画特效设置（可以设置多个特效） $(this) . animate({ //不透明度逗号隔开，宽度，left值 opacity:0.2,width: 400,left: 100 //时间，swing代表曲线型 }), "2000"，"swing"，function(){ //返回内容 alert("动画执行完毕"); },
效果图：
点击这个div，执行动画效果：
向左移动了100px
//第二个动画 $ (this) .animate({ //不透明度，宽度，left值 opacity:1, width: 200, left:8 //时间，linear代表线型 } ,2000, "linear", function(){ //返回内容 alert("动画执行完毕"); }) }) }) </script> </body> </html> //当有多个动画时，是依次执行的
第二个动画效果图：
点击后变成长方形半透明盒子又变了回来
这是一个动画效果。
自定义函数种类：
1、.animate( ) :根据一-组CSS属性,执行自定义动画。
2、.clearQueue( ) : 从列队中移除所有未执行的项。
3、.delay( ) :设置-个延时来推迟执行队列中后续的项。
4、.finish( ) : 停止当前正在运行的动画,删除所有排队的动画,完成匹配元素所有的动画。
5、.stop( ) :停止匹配元素当前正在运行的动画。
