开发者学堂课程【jQuery 开发教程： jQuery 特效_自定义2】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4311
jQuery 特效_自定义2
一、 jQuery 特效_自定义2
自定义函数种类：
1、.animate( ) :根据一-组CSS属性,执行自定义动画。
2、.clearQueue( ) : 从列队中移除所有未执行的项。
3、.delay( ) :设置-个延时来推迟执行队列中后续的项。
4、.finish( ) : 停止当前正在运行的动画,删除所有排队的动画,完成匹配元素所有的动画。
5、.stop( ) :停止匹配元素当前正在运行的动画。
首先创建一个HTML文件
<IDOCTYPE 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: pink; //绝对定位 position: absolute; } button{ position: absolute; } </style> </head> <body> //div标签 <div></div> //按钮 <button>停止动画< /button> //js代码 <script> $ (function(){ //声明对象div var div=$("div"); //点击事件 div.click( function(){ $ (this). animate({ //不透明度，宽度，left值 width: "500px",opacity:0.2,left :200 //执行时间，线型，delay延时时间方法 }, 1000, "linear") . delay(5000); $(this) . animate({ //不透明度完全透明，宽度，left值 width; 200,opacity:1,left:30 //曲线型 },4000 , "swing", function() { alert("动画执行完毕"); }) });
效果图：
点击div会执行一个动画效果
并且浏览器提示动画执行完毕
//选择到button，给一个点击事件 $("button") .click(function(){ //点击实现动画停止 div. clearqueue();//动画名称 //停止当前正在运行的动画,删除所有排队的动画,完成匹配元素所有的动画。点击立刻停止动画 div. finish(); //停止匹配元素当前正在运行的动画。 div.stop(); }) }) </script> </body>
动画停止效果图：
点击div开始动画
在中途点击按钮停止动画，不会马上停止，而是把当前动画执行完毕，清除后面的动画项
效果：
这是已经停止了的动画
delay延时时间方法效果图：
点击开始动画：
会停留五秒
再次返回
finish();点击立刻停止动画
效果图：点击开始动画
这是点击停止动画会立刻停止并回到
stop();点击停止到当前动画页面
效果图：点击开始动画
点击停止
这里点击停止动画会停止到当前动画页面
