jQuery 动画 jquery 动画 源码
qiyuwang 2024-12-20 18:16 31 浏览 0 评论
我们可以通过 jQuery 中的 animate() 方法来创建自定义动画。
animate()方法
animate() 方法用于创建自定义动画。
语法如下：
$(selector).animate({params}, speed, easing, callback);
- params ：必需参数，定义要设置动画的 CSS 属性。
- speed：可选参数，指定效果的持续时间，可选值有 slow、fast、毫秒。
- easing：可选参数，规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数有 swing、linear。
- callback：可选参数，是动画完成后要执行的函数。
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如果要对位置进行操作，需要先将元素的 position 属性设置为 relative、fixed 、absolute。
示例：
我们来看一下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<style>
.box{
width: 700px;
height: 200px;
border: 1px solid #000;
}
.rect{
width: 100px;
height: 100px;
background: pink;
margin-top: 50px;
position:absolute;
}
</style>
<script>
$(function(){
$("button").click(function(){
$(".rect").animate({left:'300px'});
});
});
</script>
</head>
<body>
<div class="box">
<div class="rect"></div>
</div>
<p><button>开始动画</button></p>
</body>
</html>
在这个例子中，有一个大的矩形框，我们要实现的效果为点击按钮，让粉色正方形向右移动。需要注意的是，我们必须给要移动的元素设置 position 属性，否则 animate() 方法不起作用。而花括号 {} 中的就是 CSS 属性，animate() 方法中几乎可以操作所有 CSS 属性。但是在使用时必须注意，要使用 Camel 标记法书写所有的属性名，例如 padding-left 使用 paddingLeft ，padding-right 使用 paddingRight 等。
我们来看一下上述代码在浏览器中的演示效果：
操作多个属性
我们可以为一个动画设置多个属性，各个属性之间通过逗号隔开。例如设置动画移动后的距离，透明度，宽度和高度。
示例：
$(function(){
$("button").click(function(){
$(".rect").animate({
left: '400px',
opacity: '0.8',
height: '20px',
width: '20px'
}, 2000);
});
});
在浏览器中的演示效果：
使用相对值
我们在给动画设置 CSS 属性的时候可以使用相对值，相对值就是相当于元素当前值，在值的前面加上 += 或 -= 符号。
示例：
$(function(){
$("button").click(function(){
$(".rect").animate({
left: '400px',
opacity: '0.8',
height: '-=50px',
width: '+=100px'
}, 2000);
});
});
在浏览器中的演示效果：
使用预先定义的值
我们可以将属性的动画值指定为 show，hide 或 toggle 。
示例：
show 表示显示，hide 表示隐藏，toggle 表示切换显示与隐藏：
$(function(){
$("button").click(function(){
$(".rect").animate({
left:'300px',
height: 'toggle',
width: 'toggle',
}, 2000);
});
});
在浏览器中的演示效果：
使用队列功能
默认情况下，jQuery 提供针对动画的队列功能。这也就意味着如果在彼此之后编写多个 animate() 方法调用，jQuery 将使用这些方法调用创建一个“内部”队列，然后它逐一运行 animate 调用。
示例：
$(function(){
$("button").click(function(){
var rect = $(".rect");
rect.animate({left:'300px', width:'300px', opacity:'0.8'}, 2000);
rect.animate({height:'10px', opacity:'0.5'}, "slow");
rect.animate({width:'100px', height:'100px', opacity:'1'}, 2000);
});
});
在浏览器中的演示效果：
stop()方法
stop() 方法用于在动画或效果完成前对它们进行停止。它适用于所有的 jQuery 效果函数，包括滑动，淡入淡出和自定义动画。
语法如下：
$(selector).stop(stopAll,goToEnd);
- stopAll：可选参数，指定是否应该清除动画队列，默认值为 false ，即只会停止活动的动画，后续队列动画仍继续执行。
- gotoend：可选参数，指定是否立即完成当前动画，默认值为 false。
示例：
点击按钮开始动画，点击粉色正方形停止动画：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<style>
.box{
width: 700px;
height: 200px;
border: 1px solid #000;
}
.rect{
width: 100px;
height: 100px;
background: pink;
margin-top: 50px;
position:absolute;
}
</style>
<script>
$(function(){
$("button").click(function(){
$(".rect").animate({
left:'300px',
width: '300px',
}, 3000);
});
$(".rect").click(function(){
$(this).stop();
});
});
</script>
</head>
<body>
<div class="box">
<div class="rect"></div>
</div>
<p><button>点击按钮开始动画</button></p>
</body>
</html>
在浏览器中的演示效果：
相关推荐
- PayPal严重漏洞可通过不安全的JAVA反序列化对象
-
在2015年12月,我在PayPal商业网站(manager.paypal.com)中发现了一个严重的漏洞,这个漏洞的存在,使得我可以通过不安全的JAVA反序列化对象,在PayPal的网站服务器上远程...
- 提醒:Apache Dubbo存在反序列化漏洞
-
背景：近日监测到ApacheDubbo存在反序列化漏洞（CVE-2019-17564），此漏洞可导致远程代码执行。ApacheDubbo是一款应用广泛的高性能轻量级的JavaRPC分布式服务框架...
- 【预警通报】关于WebLogicT3存在反序列化高危漏洞的预警通报
-
近日，我中心技术支撑单位监测到WebLogicT3存在反序列化0day高危漏洞，攻击者可利用T3协议进行反序列化漏洞实现远程代码执行。...
- Apache dubbo 反序列化漏洞(CVE-2023-23638)分析及利用探索
-
在对Apachedubbo的CVE-2023-23638漏洞分析的过程中，通过对师傅们对这个漏洞的学习和整理，再结合了一些新学的技巧运用，从而把这个漏洞的利用向前推了一步。整个过程中的研究思路以及...
- 案例|WebLogic反序列化漏洞攻击分析
-
目前网络攻击种类越来越多，黑客的攻击手段也变得层出不穷，常规的防护手段通常是对特征进行识别，一旦黑客进行绕过等操作，安全设备很难发现及防御。通过科来网络回溯分析系统可以全景还原各类异常网络行为，记录所...
- 【预警通报】关于ApacheOFBizRMI反序列化远程代码 执行高危漏洞的预警通报
-
近日，我中心技术支撑单位监测发现ApacheOFBiz官方发布安全更新，修复了一处远程代码执行漏洞。成功利用该漏洞的攻击者可造成任意代码执行，控制服务器。该漏洞编号：CVE-2021-26295，安...
- 关于OracleWebLogic wls9-async组件存在反序列化远程命令执行高危漏洞的预警通报
-
近日，国家信息安全漏洞共享平台（CNVD）公布了OracleWebLogicwls9-async反序列化远程命令执行漏洞。攻击者利用该漏洞，可在未授权的情况下远程执行命令。该漏洞安全级别为“高危”。现...
- Rust语言从入门到精通系列 - Serde序列化/反序列化模块入门指北
-
Serde是一个用于序列化和反序列化Rust数据结构的库。它支持JSON、BSON、YAML等多种格式，并且可以自定义序列化和反序列化方式。Serde的特点是代码简洁、易于使用、性能高效。...
- Java反序列化漏洞详解（java反序列化漏洞利用）
-
Java反序列化漏洞从爆出到现在快2个月了，已有白帽子实现了jenkins，weblogic，jboss等的代码执行利用工具。本文对于Java反序列化的漏洞简述后，并对于Java反序列化的Poc进行详...
- 关于Oracle WebLogic Server存在反序列化远程代码执行漏洞的安全公告
-
安全公告编号:CNTA-2018-00222018年7月18日，国家信息安全漏洞共享平台（CNVD）收录了OracleWebLogicServer反序列化远程代码执行漏洞（CNVD-2018-13...
- CVE-2020-9484 Apache Tomcat反序列化漏洞浅析
-
本文是i春秋论坛作家「Ybwh」表哥原创的一篇技术文章，浅析CVE-2020-9484ApacheTomcat反序列化漏洞。01漏洞概述这次是因为错误配置和org.apache.catalina....
- 告别脚本小子系列丨JAVA安全(8)——反序列化利用链(下)
-
0x01前言...
- 关于WebLogic反序列化高危漏洞的紧急预警通报
-
近日，WebLogic官方发布WebLogic反序列化漏洞的紧急预警通告，利用该漏洞可造成远程代码执行并直接控制Weblogic服务器，危害极大。该漏洞编号为：CVE-2019-2890，安全级别为“...
- 高危!Fastjson反序列化漏洞风险通告
-
漏洞描述...
- 学习Vulhub的Java RMI Registry 反序列化漏洞
-
这个实验，我们先通过dnslog演示命令执行，然后通过反弹shell获得root权限。JavaRemoteMethodInvocation用于在Java中进行远程调用。RMI存在远程bind的...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- PayPal严重漏洞可通过不安全的JAVA反序列化对象
- 提醒:Apache Dubbo存在反序列化漏洞
- 【预警通报】关于WebLogicT3存在反序列化高危漏洞的预警通报
- Apache dubbo 反序列化漏洞(CVE-2023-23638)分析及利用探索
- 案例|WebLogic反序列化漏洞攻击分析
- 【预警通报】关于ApacheOFBizRMI反序列化远程代码 执行高危漏洞的预警通报
- 关于OracleWebLogic wls9-async组件存在反序列化远程命令执行高危漏洞的预警通报
- Rust语言从入门到精通系列 - Serde序列化/反序列化模块入门指北
- Java反序列化漏洞详解（java反序列化漏洞利用）
- 关于Oracle WebLogic Server存在反序列化远程代码执行漏洞的安全公告
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)