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()停止动画方法

//stop(是否清空动画队列,是否完成当前动画); 默认stop(false,false);

<!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>

转载于:https://www.cnblogs.com/smivico/p/7832802.html

jquery-animate()动画相关推荐

jQuery animate动画效果
jQuery animate动画效果 1.animate动画效果 2.animate回调函数 3.参数为数学表达式形式 4.滑动选项卡 1.animate动画效果 <!DOCTYPE html& ...
jQuery（四）jQuery animate动画
文章目录 jQuery动画练习-滑动选项卡 jQuery动画通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完之后会执行一个函数. 不想写单位可以直接写数字, ...
jQuery 效果 - 动画 animate() 方法
我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...
jQuery animate方法开发极客标签Logo动画融合效果
为什么80%的码农都做不了架构师?>>> 在线演示本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画 ...
js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现一.总结一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
jquery animate函数实现
jquery animate 函数实现动画效果参数一比如高度宽度之类的:'-=50' 参数二速度之类 <html xmlns="http://www.w3.org/1999/ ...
放弃使用jQuery实现动画
在 Web开发的圈子里,开发者常常认为CSS动画是一种高性能web动画技术,如果想让网页加载的更快一些,就应该用纯CSS动画.其实这种观点是错误的, 很多开发者早就放弃了javascript的动画,迫 ...
php动画,（轻松学PHP-JS篇）jQuery学习-动画
PHP自学与交流中心QQ群:435916459 jQuery中的动画 show()和hide()方法 1.show()方法和hide()方法是jQuery中最基本的方法,hide()方法会将一个元素的 ...
jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
JQuery 总结（2） jQuery 效果动画
一切换 1.基本 show()展示,hide()隐藏,toggle()切换 1 2 3 4 5 6 7 8 9 show()展示,hide()隐藏,toggle()切换<br> ...

jquery-animate()动画

jquery-animate()动画相关推荐

最新文章

热门文章