jQuery 特效自定义1|学习笔记

简介: 快速学习 jQuery 特效自定义1

开发者学堂课程【jQuery 开发教程:jQuery 特效自定义1】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/362/detail/4310


jQuery 特效自定义1


一、 jQuery特效自定义1

首先创建一个 HTML 文件,animate 文件名

图片69.png


<!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("动画执行完毕");
},

效果图:

图片88.png

点击这个div,执行动画效果:

图片89.png

向左移动了100px

//第二个动画 
$ (this) .animate({
//不透明度,宽度,left值
opacity:1,
width: 200,
left:8
//时间,linear代表线型
} ,2000, "linear", function(){
//返回内容
alert("动画执行完毕");
})
})
})
</script>
</body>
</html>
//当有多个动画时,是依次执行的

第二个动画效果图:

图片90.png

点击后变成长方形半透明盒子又变了回来

图片91.png

图片92.png

这是一个动画效果。


自定义函数种类:

1、.animate( ) :根据一-组CSS属性,执行自定义动画。

2、.clearQueue( ) : 从列队中移除所有未执行的项。

3、.delay( ) :设置-个延时来推迟执行队列中后续的项。

4、.finish( ) : 停止当前正在运行的动画,删除所有排队的动画,完成匹配元素所有的动画。

5、.stop( ) :停止匹配元素当前正在运行的动画。

相关文章
|
12月前
|
JavaScript 前端开发
前端基础 - JQuery自定义校验器
前端基础 - JQuery自定义校验器
63 0
|
JavaScript
jQuery 自定义动画 animate(详细步骤)
jQuery 自定义动画 animate(详细步骤)
81 0
|
JavaScript
jQuery 自定义插件
jQuery 自定义插件
46 0
|
2月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
51 13
|
5月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
36 0
|
JavaScript
jQuery 自定义插件(详细步骤)
jQuery 自定义插件(详细步骤)
123 0
|
5月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
37 0
|
5月前
|
JavaScript 前端开发 Windows
jQuery权威指南学习笔记
jQuery权威指南学习笔记
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
JavaScript 前端开发 Java
HTML+CSS+JS 学习笔记(四)———jQuery
HTML+CSS+JS 学习笔记(四)———jQuery