一、animate()语法

$(“选择器”).animate({CSS样式},时间,运动方式,回调函数);

参数说明：

参数1：CSS属性名，属性值，JSON格式{"属性名":"属性值"}

参数2：动画执行时间，毫秒

参数3：动画的运动方式，参数要用引号，例如：linear是匀速播放

参数4：回调函数function(){}，动画完毕后，执行的函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.     div{
  10.         width:200px;
  11.         height:200px;
  12.         background: greenyellow;
  13.         position:absolute;
  14.         top:0;
  15.         left:0;
  16.     }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div></div>
  21. </body>
  22. </html>
  23. <script src="js/jquery-1.12.4.min.js"></script>
  24. <script>
  25. $('div').animate({'top':500,'left':400},3000,function(){
  26.     $(this).css('backgroundColor','pink');
  27. })
  28. </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动画方法是一个异步语句，也可以写回调函数，描述运动结束后可以做什么事情。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.     div{
  10.         width:100px;
  11.         height:100px;
  12.         background: red;
  13.         position:absolute;
  14.         top:100px;
  15.         left:0;
  16.     }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div></div>
  21. </body>
  22. </html>
  23. <script src="js/jquery-1.12.4.min.js"></script>
  24. <script type="text/javascript">
  25.  $('div').animate({'left':500},1000,function(){
  26.      $(this).css('backgroundColor','blue');
  27.  })
  28.  
  29. </script>

其他方法也都有回调函数：

slideUp()、slideDown()、fadeIn()、fadeOut()、show()、hide()

五、延迟动画delay()

所有动画方法都可以用delay()。表示这动画不是立即执行，要等待一段时间再执行。

参数：规定延迟时间。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.     div{
  10.         width:100px;
  11.         height:100px;
  12.         background: red;
  13.         position:absolute;
  14.         top:0;
  15.         left:0;
  16.  
  17.     }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div></div>
  22. </body>
  23. </html>
  24. <script src="js/jquery-1.12.4.min.js"></script>
  25. <script type="text/javascript">
  26. // $('div').delay(1000).slideUp();
  27. // $('div').delay(1000).slideDown();
  28. // $('div').delay(2000).nimate({'left':500},1000)
  29.  
  30. $('div').delay(1000).slideUp().delay(1000).slideDown().delay(2000).animate({'left':500},1000)
  31. </script>

六、stop()停止动画方法

//stop(是否清空动画队列,是否完成当前动画); 默认stop(false,false);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.      div{
  10.          width:100px;
  11.          height:100px;
  12.          background: red;
  13.          position:absolute;
  14.          top:100px;
  15.          left:0;
  16.      }
  17.  
  18.     </style>
  19. </head>
  20. <body>
  21.     <input type="button" value="stop()默认flase\false">
  22.     <input type="button" value="stop(true)">
  23.     <input type="button" value="stop(true,true)">
  24.     <input type="button" value="stop(false,true)">
  25.     <input type="button" value="finish()">
  26.     <div></div>
  27. </body>
  28. </html>
  29. <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  30. <script type="text/javascript">
  31. $('div').animate({'left':1000},1500);
  32. $('div').animate({'top':300},1500);
  33. $('div').animate({'left':0},1500);
  34. $('div').animate({'top':100},1500);
  35. //stop(是否清空动画队列,是否完成当前动画);
  36. $('input').eq(0).click(function(){
  37.     $('div').stop();// false false
  38. })
  39. $('input').eq(1).click(function(){
  40.     $('div').stop(true);  //true flase
  41. })
  42. $('input').eq(2).click(function(){
  43.     $('div').stop(true,true);
  44. })
  45. $('input').eq(3).click(function(){
  46.     $('div').stop(false,true);
  47. })
  48. </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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.     div{
  10.         width:100px;
  11.         height:100px;
  12.         background: orange;
  13.         position:absolute;
  14.         top:100px;
  15.         left:0;
  16.     }
  17.     </style>
  18. </head>
  19. <body>
  20.     <input type="button" value="到0广州">
  21.     <input type="button" value="到1000北京">
  22.     <div></div>
  23. </body>
  24. </html>
  25. <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  26. <script type="text/javascript">
  27.  $('input').eq(0).click(function(){
  28.      $('div').stop(true).animate({'left':0},1000);
  29.  })
  30.  $('input').eq(1).click(function(){
  31.      $('div').stop(true).animate({'left':1000},1000)
  32.  })
  33.  
  34. </script>

方法2：节流方法，判断元素is()是否在运动过程中，如果是，就不执行后面的操作；如果不是，就执行后面的动画。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.     div{
  10.         width:100px;
  11.         height:100px;
  12.         background: orange;
  13.         position:absolute;
  14.         top:100px;
  15.         left:0;
  16.     }
  17.     </style>
  18. </head>
  19. <body>
  20.       <input type="button" value="到0广州">
  21.       <input type="button" value="到1000北京">
  22.       <div></div>
  23. </body>
  24. </html>
  25. <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  26. <script type="text/javascript">
  27.  $('input').eq(0).click(function(){
  28.      if(!$('div').is(':animated')){
  29.          $('div').animate({'left':0}, 2000)
  30.      }
  31.  })
  32.  $('input').eq(1).click(function(){
  33.     if(!$('div').is(':animated')){
  34.         $('div').animate({"left":1000},2000);
  35.     }
  36.  })
  37.  
  38. </script>

jquery-animate()动画的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

  3. jquery animate 动画效果使用说明

    animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性 ...

  4. jQuery animate动画 stop()方法详解~

    一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...

  5. jquery animate动画持续运动

    function fingers(){ $(".box01 .fingers").animate({"width":"7.5rem",&qu ...

  6. jquery的动画函数animate()讲解一

    jquery animate 动画效果使用说明 animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指 ...

  7. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  8. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  9. jquery IE6 下animate 动画的opacity无效

    jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~

  10. jQuery 效果 - 动画 animate() 方法

    我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...

随机推荐

  1. springcloud(九)-Feign使用Hystrix

    前言 上一篇我们使用注解@HystrixCommond的fallbackMethod属性实现回退.然而,Feign是以接口形式工作的,它没有方法体,上一篇讲解的方式显然不适用于Feign. 那么Fei ...

  2. 小程序中实时将less编译成wxss

    1.npm或者yarn全局安装wxss-cli npm install -g wxss-cli 2.运行wxss-cli命令(weuiTest为小程序目录) wxss ./weuiTest 实时监听w ...

  3. Mac下关闭Sublime Text 3的更新检查

    操作如下: 注意:update_check的属性前后都要有一个逗号. , "update_check":false, 然后还需要一步,就是注册破解,在[Help]->[Ent ...

  4. (转)Memcached 之 .NET（C#）实例分析

    一:Memcached的安装 step1. 下载memcache(http://jehiah.cz/projects/memcached-win32)的windows稳定版(这里我下载了memcach ...

  5. 数据库~Mysql里的Explain说明

    对于mysql的执行计划可以在select前添加Explain来实现,它可以告诉我们你的语句性能如何. 下面是对explain的具体说明,也都是官方的,以后进行参考. id SELECT识别符.这是S ...

  6. 解决Linux下pcieport 0000:00:1c.5问题导致的系统根目录/磁盘空间不足

    最近刚换了笔记本,拿到本后在win10基础装上Ubuntu 16.04双系统,有个问题是每次关机都会报一堆pcie问题,并且经常没声音,声音问题通过上一篇文章暂时解决,然后就没在意了,可是几天后出现系 ...

  7. CSS选择器详解（二）通用选择器和高级选择器

    目录 通用选择器 高级选择器 子选择器 相邻兄弟选择器 属性选择器 通用选择器 通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示. 语法: * { property1: value ...

  8. CPU缓存一致性协议与java中的volatile关键字

    有关缓存一致性协议MESI自行百度. 提出问题:volatile在缓存一致性协议上又做了哪些事情?为啥它不保证原子性? 在缓存一致性协议下,CPU为了执行效率使用了写(存储)缓存和失效队列从而导致对用 ...

  9. Linux安装AUTOCONF和AUTOMAKE产生的程序的一般步骤

    概述: 在Linux下安装一个应用程序时, 一般先运行脚本configure, 然后用make来编译源程序, 在运行make install, 最后运行make clean删除一些临时文件. 相关点的 ...

  10. C# 通过反射获取方法/类上的自定义特性

    1.所有自定义属性都必须继承System.Attribute 2.自定义属性的类名称必须为 XXXXAttribute 即是已Attribute结尾 自定义属性QuickWebApi [Attribu ...