首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

深入理解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()就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
layui弹出层效果实现代码
May 19 Javascript
vuex进阶知识点巩固
May 20 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
js实现电灯开关效果
Jan 19 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
音箱(1) 春雷3P7(1) 耳机(1) 单管机(1) 晶体管(2) 收信机(3) BOSE(2) ICF-2010(1) 77A(2) 探测器(1)
You might like
火影忍者：这才是千手柱间和扉间的真正死因，角都就比较搞笑了！
2020/03/10 日漫
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
从零学习node.js之mysql数据库的操作（五）
2017/02/24 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
美国名牌太阳镜折扣网站：Eyedictive
2017/05/15 全球购物
MONNIER Frères英国官网：源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
丝芙兰墨西哥官网：Sephora墨西哥
2020/05/30 全球购物
新电JAVA笔试题目
2014/08/31 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
大学生入党思想汇报
2014/01/14 职场文书
旅游文化节策划方案
2014/06/06 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书