jQuery 特效_自定义2|学习笔记-阿里云开发者社区

jQuery 特效_自定义2|学习笔记

2022-02-17 217

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 快速学习 jQuery 特效_自定义2

开发者学堂课程【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会执行一个动画效果

图片94.png

并且浏览器提示动画执行完毕

图片95.png

//选择到button，给一个点击事件  
$("button") .click(function(){
//点击实现动画停止
div. clearqueue();//动画名称
//停止当前正在运行的动画,删除所有排队的动画,完成匹配元素所有的动画。点击立刻停止动画
div. finish();
//停止匹配元素当前正在运行的动画。
div.stop();
})
})
</script>
</body>