需求描述:我需要对不懂的两个HTML对象进行操作,同时开始动画,同时结束动画。

遇到问题:如果先后对连个对象进行 animate动画,那么第一个会先运行,等第一个运行完了运行第二个,这样就不同步了。

解决方法:使用 setTimeout(),每一个延时执行的方法是不会相互干预的。

代码

------------------------------------------------------------------

对一个HTML对象修改一种属性

$('#box').animate({height:400},500)

对一个HTML修改两种属性

$('#box').animate({height:400},500).animate({width:400},500);  //分先后执行
$('#box').animate({height:400,width:400},500);//同时执行

对多HTML对象修改多种属性

setTimeOut(fa,1000)
setTimeOut(fb,1000)
setTimeOut(fc,1000)
setTimeOut(fd,1000) function fa(){
   $('#a').animate({height:400},500)
}
function fb(){
 $('#b').animate({height:400},1000)
}
function fc(){
 $('#c').animate({width:400},1000)
}
function fd(){
 $('#d').animate({width:400},800)
}

个人博客地址:http://blog.wxp123.me/  Jquery 自定义动画同步进行如何实现?

Jquery 自定义动画同步进行如何实现?的更多相关文章

  1. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  2. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  3. jQuery 自定义动画效果

    <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...

  4. Jquery自定义动画与动画队列

    animate:自定义动画 $(selector).animate({params},[speed],[easing],[callback]); params:要执行动画的css属性,它是一个对象可以 ...

  5. jQuery——自定义动画

    动画方法:animate(json,1000, function (){}) 参数说明:json代表属性设置,1000是动画时间,最后一个是回调函数,其中动画时间可选 属性支持:http://www. ...

  6. jQuery自定义动画

    $(function(){ $(".btn1").click(function(){ $(','opacity':'toggle'}); }); $(".btn2&quo ...

  7. python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  8. jQuery Easing动画效果扩展(转)

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  9. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

随机推荐

  1. Bear and Tower of Cubes Codeforces - 680D

    https://codeforces.com/contest/680/problem/D 一道2D,又是搞两个小时才搞出来...不过好在搞出来了 官方题解:可以证明对于m,设a是满足a^3<=m ...

  2. Tomcat固定的目录结构

    1. /work Tomcat把由Jsp生成的Servlet放于此目录下. 2. /webapps 当发布Web应用时,默认情况下把Web应用文件放于此目录下. 3. /logs 存放Tomcat的日 ...

  3. 【持续更新】CSS居中

    水平垂直居中 知道自身的宽度.高度 <div class="test"></div> <style> .test { position: abs ...

  4. 洛谷 P1902 刺杀大使

    刺杀大使 一道并不难的二分题,竟让我交了上20次,诶,果然还是我太弱了. 看完题目就基本想到要怎么做了: 只需要对最小伤害代价进行二分即可,check()函数里用搜索判断是否可以到达最后一行,这里的c ...

  5. 在页面实现qq跳转链接

    http://shang.qq.com/v3/widget/consult.html

  6. DVWA之Brute Force教程

    ---恢复内容开始--- Brute Force暴力破解模块,是指黑客密码字典,使用穷举的方法猜出用户的口令,是一种广泛的攻击手法. LOW low级别的漏洞利用过程 1.使用burp suite工具 ...

  7. 安装MySQLdb出现HAVE_WCSCOLL重定义问题的解决方法

    root@wodeyitian MySQL-python-1.2.3]# python setup.py install running install running bdist_egg runni ...

  8. OPENFIRE 使用Hazelcast插件进行集群

    参考资料:http://www.linuxidc.com/Linux/2014-01/94850.htm   https://www.igniterealtime.org/projects/openf ...

  9. 洛谷 P2419 [USACO08JAN]牛大赛Cow Contest

    题目背景 [Usaco2008 Jan] 题目描述 N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a p ...

  10. codevs 1145 Hanoi双塔问题 2007年NOIP全国联赛普及组

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 给定A.B.C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的 ...