jquery-animate()动画
一、animate()语法
$(“选择器”).animate({CSS样式},时间,运动方式,回调函数);
参数说明:
参数1:CSS属性名,属性值,JSON格式{"属性名":"属性值"}
参数2:动画执行时间,毫秒
参数3:动画的运动方式,参数要用引号,例如:linear是匀速播放
参数4:回调函数function(){},动画完毕后,执行的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:200px;
height:200px;
background: greenyellow;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$('div').animate({'top':500,'left':400},3000,function(){
$(this).css('backgroundColor','pink');
})
</script>
二、不能参加运动的属性
我们关心的不能参加运动的有哪些?
1、background-color 背景色。但是CSS3可以实现
2、background-position背景定位,但是CSS3可以实现
3、一切的CSS3属性不能动画,border-radius除外。
三、动画排序
一个元素animate的时候,会按顺序执行
//$('div').animate({"left":500},1000);
//$('div').animate({"top":500},1000);
//$('div').animate({"left":0},1000);
//$('div').animate({"top":0},1000);
同一个元素多次打点animate的时候,动画会自动排成队列,谁先写的,谁先执行。
$('div').animate({"left":500},1000).animate({"top":500},1000).animate({"left":0},1000).animate({"top":0},1000);
四、异步语句和回调函数
animate动画方法是一个异步语句,也可以写回调函数,描述运动结束后可以做什么事情。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background: red;
position:absolute;
top:100px;
left:0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('div').animate({'left':500},1000,function(){
$(this).css('backgroundColor','blue');
}) </script>
其他方法也都有回调函数:
slideUp()、slideDown()、fadeIn()、fadeOut()、show()、hide()
五、延迟动画delay()
所有动画方法都可以用delay()。表示这动画不是立即执行,要等待一段时间再执行。
参数:规定延迟时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background: red;
position:absolute;
top:0;
left:0; }
</style>
</head>
<body>
<div></div>
</body>
</html>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// $('div').delay(1000).slideUp();
// $('div').delay(1000).slideDown();
// $('div').delay(2000).nimate({'left':500},1000) $('div').delay(1000).slideUp().delay(1000).slideDown().delay(2000).animate({'left':500},1000)
</script>
六、stop()停止动画方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background: red;
position:absolute;
top:100px;
left:0;
} </style>
</head>
<body>
<input type="button" value="stop()默认flase\false">
<input type="button" value="stop(true)">
<input type="button" value="stop(true,true)">
<input type="button" value="stop(false,true)">
<input type="button" value="finish()">
<div></div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('div').animate({'left':1000},1500);
$('div').animate({'top':300},1500);
$('div').animate({'left':0},1500);
$('div').animate({'top':100},1500);
//stop(是否清空动画队列,是否完成当前动画);
$('input').eq(0).click(function(){
$('div').stop();// false false
})
$('input').eq(1).click(function(){
$('div').stop(true); //true flase
})
$('input').eq(2).click(function(){
$('div').stop(true,true);
})
$('input').eq(3).click(function(){
$('div').stop(false,true);
})
</script>
七、is(':animated')
is表示“是不是”,而不是“是”,表示检测某一个元素是否具备某种状态,返回true、false的布尔值。
is里面可以写选择器:
1 $(this).is(".t"); //判断当前被点击的p是否有.t这个类名,是就返回true
2 $(this).is("#t"); //判断当前被点击的p是否有#t这个id名,是就返回true
3 $(this).is("p:odd"); //判断当前被点击的p是否是奇数,是就返回true
4 $(this).is("p:lt(3)"); //判断当前被点击的p下标是否小于3,是就返回true
$(this).is("p:visible"); //判断当前被点击的p是否可见
八、动画节流
当一个元素身上被积累了很多动画,不经之间就积累了,我们称为“流氓”
希望新的动画触发时,前面这个动画全部清空,立即停止,防止用户频繁触发事件
方法1:用stop()。清空前面所有动画队列,立即停止当前动画,参数值传第一个true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background: orange;
position:absolute;
top:100px;
left:0;
}
</style>
</head>
<body>
<input type="button" value="到0广州">
<input type="button" value="到1000北京">
<div></div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('input').eq(0).click(function(){
$('div').stop(true).animate({'left':0},1000);
})
$('input').eq(1).click(function(){
$('div').stop(true).animate({'left':1000},1000)
}) </script>
方法2:节流方法,判断元素is()是否在运动过程中,如果是,就不执行后面的操作;如果不是,就执行后面的动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background: orange;
position:absolute;
top:100px;
left:0;
}
</style>
</head>
<body>
<input type="button" value="到0广州">
<input type="button" value="到1000北京">
<div></div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('input').eq(0).click(function(){
if(!$('div').is(':animated')){
$('div').animate({'left':0}, 2000)
}
})
$('input').eq(1).click(function(){
if(!$('div').is(':animated')){
$('div').animate({"left":1000},2000);
}
}) </script>
jquery-animate()动画的更多相关文章
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- jQuery animate()动画效果
1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...
- jquery animate 动画效果使用说明
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性 ...
- jQuery animate动画 stop()方法详解~
一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...
- jquery animate动画持续运动
function fingers(){ $(".box01 .fingers").animate({"width":"7.5rem",&qu ...
- jquery的动画函数animate()讲解一
jquery animate 动画效果使用说明 animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指 ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- jquery IE6 下animate 动画的opacity无效
jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~
- jQuery 效果 - 动画 animate() 方法
我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...
随机推荐
- CF1083(Round #526 Div. 1) 简要题解
题目链接 https://codeforces.com/contest/1083 简要题目翻译 题解 A. The Fair Nut and the Best Path 可以忽略掉"任意时刻 ...
- LINQ入门教程之各种标准查询操作符(二)
续上篇LINQ入门教程之各种标准查询操作符(一) LINQ入门教程之各种标准查询操作符(二) 7. 聚合操作符 8. 集合操作符 9. 生成操作符 #region 生成操作符 即从现有序列的值中 ...
- Swagger与SpringMVC项目整合
Swagger与SpringMVC项目整合 来源:http://www.2cto.com/kf/201502/376959.html 为了方便的管理项目中API接口,在网上找了好多关于API接口管理的 ...
- Oracle 12c JDBC 连接
import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...
- Ubuntu 16.04安装测试MQTT Mosquitto
环境:Ubuntu 16.04 介绍MQTT MQTT是一种机器到机器的消息传递协议,旨在为“物联网”设备提供轻量级的发布/订阅通信.它通常用于地理跟踪车队,家庭自动化,环境传感器网络和公用事业规模数 ...
- Idea软件Vim插件问题
人家说用webstorm是纯前端,用Idea是java+前端,好,那就用Idea,装上试试,全选所有插件安装,奇迹出现了,选中一行代码,backspace,删不了,我的天,好吧,复制粘贴的快捷键也不行 ...
- 行人检测4(LBP特征)
参考原文: http://blog.csdn.net/zouxy09/article/details/7929531 http://www.cnblogs.com/dwdxdy/archive/201 ...
- Orchard源码:热启动
概述 IIS线程池中的线程数量是有限制的.当有多个长时间请求时,可能会耗尽IIS可用线程.出现503错误.在MVC中.当遇到非CPU操作的长时间请求时,MVC提供了异步方法来解决这个问题. 例:利用a ...
- openvpn应用场景案例【转】
转载至:http://www.linuxfly.org/post/86/ 一.案例1 针对不同的客户端指定不同的等级和权限.通常的方法是:1.每个客户端分配不同的IP地址:2.利用防火墙对不同的IP地 ...
- Solr后台管理
Solr web管理后台 访问主页:http://localhost:8080/solr/#/ 1. Dashboard 仪表盘,显示Solr的基本信息,包含solr版本,包含系统内存和jvm内存的使 ...