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 写的个性导航菜单
Dec 24 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
详解ES6系列之私有变量的实现
Nov 21 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适配器模式(Adapter)
2014/11/25 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
Django中URLconf和include()的协同工作方法
2015/07/20 Python
如何用python整理附件
2018/05/13 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python实现简单的购物程序代码实例
2020/03/03 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
物理研修随笔感言
2014/02/14 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
见习报告怎么写
2014/10/31 职场文书
关于感谢信的范文
2015/01/23 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python