jQuery---自定义动画 animate();
自定义动画
animate();
第一个参数:{对象},里面可以传需要动画的样式
第二个参数:speed 动画的执行时间
第三个参数:easing 动画的执行效果
第四个参数:callback 回调函数
//第一个参数:对象,里面可以传需要动画的样式
$("#box1").animate({ left: 800, height: 200 });
//第二个参数:speed 动画的执行时间
$("#box1").animate({ left: 800 }, 4000);
//第三个参数:动画的执行效果
// //swing:秋千 摇摆
$("#box2").animate({ left: 800 }, 8000, "swing");
// //linear:线性 匀速
$("#box3").animate({ left: 800 }, 8000, "linear");
//第四个参数:回调函数
$("#box3").animate({ left: 800 }, 8000, "linear", function () {
console.log("动画执行完毕");
});
合体
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
} #box2 {
background-color: blue;
margin-top: 150px;
} #box3 {
background-color: yellowgreen;
margin-top: 300px;
}
</style>
</head> <body>
<input type="button" value="开始">
<input type="button" value="结束">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div> <script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () { //第一个参数:对象,里面可以传需要动画的样式
//第二个参数:speed 动画的执行时间
//第三个参数:动画的执行效果
//第四个参数:回调函数
//swing:秋千 摇摆
$("#box1").animate({ left: 800, height: 200 });
$("#box1").animate({ left: 800 }, 4000);
$("#box2").animate({ left: 800 }, 4000, "swing");
$("#box3").animate({ left: 800 }, 4000, "linear", function () {
console.log("动画执行完毕");
});
})
});
</script>
</body> </html>
jQuery---自定义动画 animate();的更多相关文章
- js进阶 13-4 jquery自定义动画animate()如何使用
js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...
- 深入学习jQuery自定义动画
× 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...
- 自定义动画animate()
在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp( ...
- Jquery 自定义动画同步进行如何实现?
需求描述:我需要对不懂的两个HTML对象进行操作,同时开始动画,同时结束动画. 遇到问题:如果先后对连个对象进行 animate动画,那么第一个会先运行,等第一个运行完了运行第二个,这样就不同步了. ...
- 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
- jQuery 效果 - 动画 animate() 方法
我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...
- jQuery 自定义动画效果
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...
- Jquery自定义动画与动画队列
animate:自定义动画 $(selector).animate({params},[speed],[easing],[callback]); params:要执行动画的css属性,它是一个对象可以 ...
- jQuery——自定义动画
动画方法:animate(json,1000, function (){}) 参数说明:json代表属性设置,1000是动画时间,最后一个是回调函数,其中动画时间可选 属性支持:http://www. ...
- jQuery自定义动画
$(function(){ $(".btn1").click(function(){ $(','opacity':'toggle'}); }); $(".btn2&quo ...
随机推荐
- light oj1170 - Counting Perfect BST卡特兰数
1170 - Counting Perfect BST BST is the acronym for Binary Search Tree. A BST is a tree data structur ...
- 用C语言实现汉诺塔自动递归演示程序
用C语言实现汉诺塔自动递归演示程序 程序实现效果 1.变界面大小依照输入递归数改变. 2.汉诺塔自动移动演示. 3.采用gotoxy实现流畅刷新. 4.保留文字显示递归流程 程序展示及实现 githu ...
- 将 ASP.NET Core 2.1 升级到最新的长期支持版本ASP.NET Core 3.1
目录 前言 Microsoft.AspNetCore.Mvc.ViewFeatures.Internal 消失了 升级到 ASP.NET Core 3.1 项目文件(.csproj) Program. ...
- Java集合效率问题
凑算式 B DEFA + --- + ------- = 10 C GHI (如果显示有问题,可以参见[图1.jpg]) 这个算式中A~I代表1~9的数字,不同的字母代表不同的数字. 比如:6+8/3 ...
- 在Docker中运行SpringBoot程序
1.将SpringBoot项目中pom.xml的build插件更换为: <build> <plugins> <plugin> <groupId>org. ...
- 避免XSS攻击
遭遇XSS攻击怎么解决 XSS的攻击手段 利用JavaScript或DOM方式进行攻击,XSS(脚本注入)提交,然后进行页面展示,影响页面的正常结构,还可以做钓鱼网站,来盗取用户的信息. 比如在页面评 ...
- smartforms设置表格脚标在最后一页显示
用户打印采购订单时,末尾计算一个合计金额,但是有多页时,合计显示在了每一页,现在希望合计项只显示在表格最后一行就可以. smartforms调整表格,将总计放在脚标内,设置脚标输出打印[在表结束处]即 ...
- 「Flink」使用Managed Keyed State实现计数窗口功能
先上代码: public class WordCountKeyedState { public static void main(String[] args) throws Exception { S ...
- 记录 Spine骨骼动画导入unity 步骤[unity3d 4.6.6版本 2d动画]
1:准备好unity使用Spine所需要的运行库,可到如下地址 https://github.com/EsotericSoftware/spine-runtimes/tree/master/spine ...
- Ant Design 方法默认传值,加上其他参数
前端填坑之路Ant Design里面的一些触发方法,如OnChange,OnSelect等等,当你触发时,该时间会自动传一些值给方法. 这是Select里面的onChange调用,在红框中,他会自动传 ...