深入理解jquery自定义动画animate()


Posted in Javascript onMay 24, 2016

在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行。但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash。这里

说的取代是网页特效部分,而不是动画。网页特效比如:渐变菜单、渐进显示、图片轮播等;而动画比如:故事情节广告、MV 等等。 

如果复制当前代码进行在本地测试的时候,请注意把不需要(其他功能展示)的代码注释掉。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title></title> 
  <script src="jquery-1.11.2.js"></script> 
  <style type="text/css"> 
    #box { 
      width: 100px; 
      height: 100px; 
      background-color: red; 
 
      position:absolute; 
    } 
 
    #pox { 
      width: 100px; 
      height: 100px; 
      background-color: green; 
      position: absolute; 
      top: 200px; 
    } 
  </style> 
</head> 
<body> 
  <input type="button" class="button" value="开始" /><input type="button" class="stop" value="停止" /> 
  <input type="button" class="ani" value="查找运动中的动画" /> 
   
  <div id="box">box</div> 
  <div id="pox">pox</div> 
</body> 
</html> 
<script type="text/javascript"> 
  $(function () { 
     
    $(".button").click(function () { 
      $("#box").animate({ 
        left: "300px"  //要想使用left top bottom right这种方向性的属性 先必须对"#box元素设置CSS 绝对定位 
      }) 
    }) 
 
 
    //自定义动画中,每次开始运动都必须是初始位置或初始状态,而有时我们想通过当前位置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。 
    $(".button").click(function () { 
      $("#box").animate({ 
        left: "+=50px" //每点击一次.button按钮,#box元素就往左移动50px 
      }) 
    }) 
     
 
    //-------------------------------------同步动画  
 
 
 
 
    //一个CSS 变化就是一个动画效果,下面的例子中,已经有四个CSS 变化(分别是width,height,opacity,fontSize的变化)实现了多重动画同步运动的效果。(所谓多重同步运动的效果就是,这四个css属性的值在同一时间,同时变化) 
     
    $(".button").click(function () { 
      $("#box").animate({ 
        width: "300px", 
        height: "200px", 
        opacity:0.5, //透明度为0.5 注:透明度的值在0-1之间 
        fontSize:"200px", //字体大小设为30px 
      }) //第一个参数:是一个对象,他是键值对的css 
    }) 
 
 
 
    //--------------------------------------列队动画  
 
 
 
    //通过回调函数现实队列动画。(效果就是:首先#box的宽度变为300px 然后高度变为200px,然后透明度变为50%,字体大小变为150px 最后弹出一个“完毕”) 
    $(".button").click(function () { 
      $("#box").animate({ width: "300px"}, 1000, function(){ 
        $("#box").animate({height:"200px"},1000,function(){ 
          $("#box").animate({opacity:0.5},1000,function(){ 
            $("#box").animate({fontSize:"150px"},1000,function(){alert("完毕")}) 
          }); 
        }); 
      }); 
    }) 
 
    //在同一个元素的基础上,使用链式调用也可以实现列队动画 
    $(".button").click(function () { 
      $("#box") 
        .animate({ width: "300px" }, 1000) 
        .animate({ height: "200px" }, 1000) 
        .animate({ opacity: 0.5 }, 1000) 
        .animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")}) 
    }); 
 
    //在同一个元素的基础上,通过依次顺序实现列队动画 (如果有多个元素则不能实现,两个元素之间的动画是同步的。) 
    $(".button").click(function () { 
      $("#box").animate({ width: "300px" }, 1000); 
      $("#box").animate({ height: "200px" }, 1000); 
      $("#box").animate({ opacity: 0.5 }, 1000); 
      $("#box").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")}); 
 
    }) 
 
    //如果有多个元素则不能实现 不信请看下面代码 (通过执行下面这段代码,我们发现#box 与#pox这两个元素的动画是同时执行的,属于#box的那两段动画是先执行 $("#box").animate({ width: "300px" }, 1000)然后再执行("#box").animate({ opacity: 0.5 }, 1000); 他们两个有列队动画的效果) 而属于#pox的两段动画是先执行 $("#pox").animate({ height: "200px" }, 1000)然后再执行 $("#pox").animate({ fontSize: "150px" }, 1000)他们两个有列队动画的效果。 但是 $("#box").animate({ width: "300px" }, 1000)与$("#pox").animate({ height: "200px" }, 1000); 同时执行的。 $("#box").animate({ opacity: 0.5 }, 1000)与$("#pox").animate({ fontSize: "150px" }, 1000)是同时执行的。 
    //前面说了这么一大堆 其实就是: 
    //#box的第一条和第三条是列队动画 
    //#pox的第二条和第四条是列队动画 
 
    //#box的第一条和#pox的第二条是同步动画 
    //#box的第三条和#pox的第四条是同步动画 
 
    $(".button").click(function () { 
      $("#box").animate({ width: "300px" }, 1000); 
      $("#pox").animate({ height: "200px" }, 1000); 
      $("#box").animate({ opacity: 0.5 }, 1000); 
      $("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")}); 
    }) 
 
 
    //那我们现在的需求是:不管你有几个元素,我都要他们依次实现列队动画效果。(测试了一下,只能用这种回调函数嵌套的方式来实现了) 
 
    $(".button").click(function () { 
      $("#box").animate({ width: "300px" }, 1000, function () { 
        $("#pox").animate({ height: "200px" }, 1000, function () { 
          $("#box").animate({ height: "200px"}, 1000, function () { 
            $("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕") }); 
          }) 
        }) 
      }) 
    }) 
 
 
 
    // ---------------------------------动画与非动画 进行队列 【queue()】 
 
 
 
 
    //我们知道动画可以有列队效果。但是一个普通的css(比如改变背景颜色)如果实现与动画进行列队呢? 
    $(".button").click(function () { 
      $("#box").slideUp(1000).slideDown(1000).css("background", "yellow") 
    }) 
 
    //本来我们是想要实现队列动画的,也就是先让#box滑动隐藏,然后再让它滑动显示,最后让它改变颜色。可是我们运行这段呢代码,我们看到第一时间就执行了css("background","yellow")这段代码。 
    //通过上面的代码我们了解到 css()方法不是动画方法,会和第一个动画同时执行。也就是说非动画不能列队。 
 
    //现在问题又来了。我现在想要实现列队动画,也想非动画和动画一起列队怎么办呢? 其实我们可以使用回调函数实现的。请看下面的代码 
 
    $(".button").click(function () { 
      $("#box") 
        .slideUp(1000) 
        .slideDown(1000, function () { $(this).css("background", "yellow") }) 
        .hide(3000); 
    }) 
 
    //但如果上面这样的话,当列队动画繁多的时候,可读性不但下降,而原本的动画方法不够清晰。所以,我们的想法是每个操作都是自己独立的方法。那么jQuery 提供了一个类似于回调函数的方法:.queue() 
 
    $(".button").click(function () {  //三个动画。 
      $("#box") 
        .slideUp(1000) 
        .slideDown(1000) 
        .queue(function () { $(this).css("background", "yellow");}) 
    }) 
 
    //现在,我们想继续在.queue()方法后面再增加一个隐藏动画,这时发现居然无法实现。这是.queue()特性导致的。有两种方法可以解决这个问题,jQuery 的.queue()的回调函数可以传递一个参数,这个参数是next 函数,在结尾处调用这个next()方法即可再链式执行列队动画。 
 
    //链式编程实现队列动画 
    $(".button").click(function () { //四个动画 
      $("#box") 
        .slideUp(1000) 
        .slideDown(1000) 
        .queue(function (next) { //这个next是一个函数 
          $(this).css("background", "yellow"); 
          next();}) 
        .hide(1000); 
    }); 
 
    //顺序编程实现队列动画 我们看到使用顺序调用的列队,逐个执行,非常清晰 
    $(".button").click(function () { 
      $("#box").slideUp(1000); 
      $("#box").slideDown(1000); 
      $("#box").queue(function (next) { 
        $(this).css("background", "yellow"); 
        next(); }); 
      $("#box").hide(1000); 
    }); 
 
     
 
    //因为next 函数是jQuery1.4 版本以后才出现的,而之前我们普遍使用的是.dequeue()方法。意思为执行下一个元素列队中的函数。 
    //使用.dequeue()方法执行下一个函数动画 
    //$(".button").click(function () { 
    //  $('#box').slideUp('slow').slideDown('slow').queue(function () { 
    //    $(this).css('background', 'orange'); 
    //    $(this).dequeue(); //相当于上面的那句next() 只是这里的function()括号里不像上面那样需要传递一个next函数 
    //  }).hide(1000) 
    //}); 
 
 
    //-----------------------------动画的清除 【clearQueue()】 
 
 
 
    //jQuery 还提供了一个清理列队的功能方法:.clearQueue()。把它放入一个列队的回调函 数或.queue()方法里,就可以把剩下为执行的列队给移除。 
 
    //清理动画列队 
 
    //假如我想在执行完第二个动画那就就不再执行了。那么只要在第二个动画的回调函数哪里添加一句$(this).clearQueue()就可以停止后面的列队动画了 
    $(".button").click(function () { 
       
      $("#box") 
        .slideUp(1000) 
        .slideDown(1000, function () { $(this).clearQueue() }) 
        .queue(function (next) { $(this).css("background", "yellow"); next() }) 
        .hide(1000); 
    }) 
 
    //那么如果获取列队动画的长度呢?  
 
    function getQueueCount() { 
      return $("#box").queue("fx").length; //获取当前列队的长度,fx 是默认列队的参数 
    } 
     
    //用法 
    $(".button").click(function () { 
 
      //下面这段代码总共有slideUp,slideDown,queue,hide这四个动画 
      $("#box") 
        .slideUp(1000, function () { alert(getQueueCount()) }) //执行到这一步的时候会打印出:4 它后面还有三个动画,所以下一步的时候会打印出3 
        .slideDown(1000, function () { alert(getQueueCount()) }) //执行到这一步的时候会打印出:3 
        .queue(function (next) { alert(getQueueCount()); $(this).css("background", "yellow"); next() }) //执行到这一步的时候会打印出:2 
        .hide(1000, function () { alert(getQueueCount()) }); //执行到这一步的时候会打印出:1 
 
    }); 
 
 
   
 
    //---------------------------------动画的停止【stop()】 
 
 
 
    //很多时候需要停止正在运行中的动画,jQuery 为此提供了一个.stop()方法。它有两个可选参数:.stop(clearQueue, gotoEnd);clearQueue 传递一个布尔值,代表是否清空未执行完的动画列队,gotoEnd 代表是否直接将正在执行的动画跳转到末状态。 
 
    $(".button").click(function () { 
      $("#box") 
        .animate({left:"1000px"} ,3000) 
    }) 
 
    $(".stop").click(function () { 
      $("#box").stop(); //将#box这个元素的动画停止掉。没有参数的stop()方法只是单纯的停止动画 
    }) 
  
    //那下面再来了解下,列队动画的停止 
     
    $(".button").click(function () { 
      $("#box").animate({ left: "300px" },1000) 
           .animate({ bottom: "300px" }, 1000) 
           .animate({ width: "300px" }, 1000) 
           .animate({ height: "300px" }, 1000)                   
    }) 
 
    //$(".stop").click(function () { 
    //  $("#box").stop(); // 如果用没有参数的stop()方法去停止有列队动画,那么只会停止掉第一个列队动画,后面的列队动画会继续执行。 
    //}) 
 
    //那么现在我想当我点击停止按钮的时候,我就需要整个将列队动画停止下来,而不是仅仅停止第一个,怎么办呢? 答案是:我们可以给stop()方法加参数 
    //stop()方法有两个可选参数: 
    //第一个可选参数,如果为true,就代表停止并清除掉后面的队列动画。即:动画完全停止(默认值为false) 
    //第二个可选参数,如果为true,就代表停止并清除掉后面的队列动画,并且当前动画会立刻跳转到当前这条动画执行完毕的末尾位置(默认为false) 
    $(".stop").click(function () { $("#box").stop(true, true); }) 
 
 
   
 
    //--------------------------------动画的延迟【delay()】 
 
 
    $(".button").click(function () { 
      $("#box").delay(2000)    //如果delay(2000) 直接写在$("#box")元素后面,就表示延迟2秒再执行动画 
        .animate({ left: "300px" }, 1000) 
        .animate({ bottom: "300px" }, 1000) 
        .animate({ width: "300px" }, 1000).delay(3000) // 写在这里表示等animate({ width: "300px" }, 1000)这段代码执行完后,延迟3秒再执行下面的代码 
        .animate({ height: "300px" }, 1000) 
    }) 
 
 
 
    //-----------------------------------获取当前正在执行的动画 【:animated 过滤器】 
 
 
    $(".button").click(function () { 
      //$("#box").slideUp(1000, function abc() { 
      //  $(this).slideToggle(1000, abc); //无限循环的调用自己。实现动画不停的执行。 
      //}) 
      //或者用这以下这种方式也可以实现 动画不停的自执行 
      $("#box").slideToggle(1000, function () { 
        $(this).slideToggle(1000, arguments.callee); //arguments.callee表示调用自身。 和上面那一句是一样的 
      }) 
 
    }) 
 
    $(".ani").click(function () { 
      $(":animated").css("background", "blue").stop(true); //获取当前正在执行的动画,并将它的颜色改为蓝色后停止动画的执行 
    }) 
 
 
 
    //---------------------动画的全局属性【$.fx.off属性可以关闭页面上所有的动画】【$.fx.interval属性可以调整动画每秒运行的帧数】 
 
    
    //$.fx.interval 属性用于设置jQuery动画每隔多少毫秒绘制一帧图像 (默认为13 毫秒) 数字越小越流畅,但可能影响浏览器性能。 
     
    //$.fx.interval = 100; // 设置动画绘制一帧帧的时间为100毫秒,(默认是13毫秒) 
 
    //$.fx.off = true; //关闭页面上所有的动画 
     
 
 
    //补充:在.animate()方法中,还有一个参数,easing 运动方式,这个参数,大部分参数值需要通过插件来使用,在后面的课程中,会详细讲解。自带的参数有两个:swing(缓动)、linear(匀速),默认为swing。 
    $('.button').click(function () { 
 
      $('#box').animate({ left: '800px' }, 1000, 'swing'); //swing 表示缓动运行,缓速运动有个特点,就是刚开始运行的慢,到了中间就比较快,最后又慢下来(中间快,两头慢) 整段代码的意思就是在1秒钟内 以缓动方式运行动画 
 
      $('#pox').animate({ left: '800px' }, 1000, 'linear'); //linear表示匀速运行,速度一直不变 整段代码的意思就是在1秒钟内 以匀速方式运行动画 
    }); 
  }); 
</script>

深入理解jquery自定义动画animate()

以上这篇深入理解jquery自定义动画animate()就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 读书笔记索引贴
Jan 11 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
js+html实现点名系统功能
Nov 05 Javascript
深入理解jquery中的事件与动画
May 24 #Javascript
Jquery元素追加和删除的实现方法
May 24 #Javascript
jquery html动态添加的元素绑定事件详解
May 24 #Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 #Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 #Javascript
jQuery unbind 删除绑定事件详解
May 24 #Javascript
深入理解jQuery之防止冒泡事件
May 24 #Javascript
You might like
PHP脚本的10个技巧(4)
2006/10/09 PHP
php自定义session示例分享
2014/04/22 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
python创建文件备份的脚本
2018/09/11 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
打架检讨书100字
2014/01/08 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
新店开张活动方案
2014/08/24 职场文书
课外科技活动总结
2014/08/27 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年宣传工作总结
2014/11/18 职场文书
年终工作总结范文2014
2014/11/27 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server