jQuery中animate的几种用法与注意事项


Posted in Javascript onDecember 12, 2016

一、animate语法结构

animate(params,speed,callback)

params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2}

speed:速度参数[可选]

callback:在动画完成时执行的函数[可选]

二、自定义简单动画

用一个简单例子来说明,实现单击某div在页面上横向飘动的效果。

<style>
 #cube{
  position:relative;/* 不加这句元素不能动 */
  width:30px;
  height:30px;
  background:red;
  cursor:pointer;
 }
</style>
<body>
 <div>
  <div id="cube"></div>
 </div>
 <script>
  $(function(){
   $("#cube").click(function(){
    $(this).animate({left:"100px"},2000)
   })
  })
 </script>

为了使元素动起来,要改变left属性。为了能影响元素top、right、bottom、left属性值必须声明元素的position。

jQuery中animate的几种用法与注意事项
演示效果

三、累加、累减动画

在之前的代码中,设置了{left:"100px"}这个属性作为参数,如果改写为{left:"+=25px"} ,效果如下

jQuery中animate的几种用法与注意事项
演示效果

四、多重动画

同时执行多个动画

上面的例子是一个很简单的动画。如果想同时执行多个动画,比如在元素向右滑动的同时,放大元素高度。

代码如下:

$(this).animate({left:"+=25px",height:"+=20px"},1000)

jQuery中animate的几种用法与注意事项

演示效果

五、按顺序执行多个动画

上例中,向右滑动与高度变大是同时发生的,如果想让方块先向右滑动再变高,只需将代码拆分

如下:

$(this).animate({left:"+=25px"},500)
  .animate({height:"+=20px"},500)

像这样的动画效果的执行有先后顺序,称为“动画队列”

jQuery中animate的几种用法与注意事项
演示效果

六、综合示例

单击方块,让他向右移动的同时增高,不透明度从50%增加到100%,之后上下移动,加宽,完成后淡出。

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .fadeOut('slow')
   })

为同一元素应用多重效果时可以通过链式方式对这些效果进行排队。

jQuery中animate的几种用法与注意事项
演示效果

七、动画回调函数

在上例中,如果想在最后一步切换css样式(background:blue),而不是淡出,如果按照通常处理,相关代码如下:

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .css("border","5px solid blue")//改动这行
   })

然而,css()方法被提前调用。

jQuery中animate的几种用法与注意事项
演示效果

引起这个问题的原因是,css()方法不会加入到动画队列中,而是立即执行。可以使用回调函数对非动画方法实现排队。

正确的相关代码如下:

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500,function(){
     $(this).css("border","5px solid blue")
    })
   })

jQuery中animate的几种用法与注意事项

演示效果

值得注意的是,callback适用于jquery所有的动画方法,比如slidDown() ,show()等。

总结

以上就是关于jquery中animate的几种用法和注意事项,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
Websocket协议详解及简单实例代码
Dec 12 #Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 #Javascript
jQuery实现字符串全部替换的方法
Dec 12 #Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 #Javascript
简单实现jquery焦点图
Dec 12 #Javascript
javascript中setAttribute兼容性用法分析
Dec 12 #Javascript
jQuery焦点图左右转换效果
Dec 12 #Javascript
You might like
PHP新手上路(八)
2006/10/09 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
python类和继承用法实例
2015/07/07 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
重构Python代码的六个实例
2020/11/25 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
2014年残疾人工作总结
2014/12/06 职场文书
红色经典电影观后感
2015/06/18 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle