需求描述:我需要对不懂的两个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. python连接mysql时连接不到test文件夹怎么办

    最新版mysql安装后默认是没有test文件夹的,这时候需要我们自己创建一个test文件夹, 文件默认路径如下    C:\ProgramData\MySQL\MySQL Server 5.7\Dat ...

  2. Bootstrap里的文件作用

    Bootstrap里的文件分别表示什么?都有什么用? bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-respon ...

  3. PAT甲级——1130 Infix Expression (25 分)

    1130 Infix Expression (25 分)(找规律.中序遍历) 我是先在CSDN上面发表的这篇文章https://blog.csdn.net/weixin_44385565/articl ...

  4. 关于本科毕业设计期间对数据挖掘工具rapidminer的使用体验和心得,案例分享

    1.前言:本科生毕业设计有好多人说没有什么用处,自己又做不出来什么新东西,全是抄抄改改的,浪费大家时间.但是对此事我的态度不同,我觉得就像我们小时候玩过家家一样,别的孩子都在玩,我不参与进去显得会有遗 ...

  5. [WOJ4354] 蜀石经

    题目链接: 点我 题目分析: 大模拟,貌似\(O(n^2)\)也可以卡常过,复杂度正确的做法是用优先队列维护. 代码: #include<bits/stdc++.h> #define N ...

  6. (bzoj1337 || 洛谷P1742 最小圆覆盖 )|| (bzoj2823 || 洛谷P2533 [AHOI2012]信号塔)

    bzoj1337 洛谷P1742 用随机增量法.讲解:https://blog.csdn.net/jokerwyt/article/details/79221345 设点集A的最小覆盖圆为g(A) 可 ...

  7. 模拟IO 读写压力测试

    #### 本实验室通过创建一个测试表myTestTable ,分配在一个足够大小的表空间. ###然后通过 insert select 方式,创建100个后台进程进行读写操作,每个后台进程预计时间20 ...

  8. Jmeter(二十三)稳定性测试后的波形图

    jmeter-plugins.org 这个网站为 JMeter 提供了一些增强型功能的插件,使用起来就像 Eclipse 装插件一样,完全做到了插件的可插拔特性.本文简要介绍如何使用这些插件让你的 J ...

  9. leetcode378 Kth Smallest Element in a Sorted Matrix

    思路1: 使用堆. 实现: class Solution { public: int kthSmallest(vector<vector<int>>& matrix, ...

  10. [BZOJ2982]combination Lucas定理

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2982 $C(N,M)\% P = C(N\% P,M\% P) * C(N/P,M/P)\ ...