需求描述:我需要对不懂的两个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. ios wkwebview 跳转到新的controllerview加载页面 出现闪退问题

    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) { if(isF ...

  2. 《统计学习方法》笔记九 EM算法及其推广

    本系列笔记内容参考来源为李航<统计学习方法> EM算法是一种迭代算法,用于含有隐变量的概率模型参数的极大似然估计或极大后验概率估计.迭代由 (1)E步:求期望 (2)M步:求极大 组成,称 ...

  3. 110 Balanced Binary Tree 平衡二叉树

    给定一个二叉树,确定它是高度平衡的.对于这个问题,一棵高度平衡二叉树的定义是:一棵二叉树中每个节点的两个子树的深度相差不会超过 1.案例 1:给出二叉树 [3,9,20,null,null,15,7] ...

  4. 《JavaScript设计模式》笔记之第一、二章:富有表现力的JavaScript 和 接口

    第一章 创建一个类 方法一:      var Anim = function() {           ...      };      Anim.prototype.start = functi ...

  5. JAVA本地项目手机访问

    http://192.168.40.56:7082/carloan/#newOrderView ipconfig  找到本地ip,然后把localhost改成本地ip就行

  6. PaaS优点与限制(3)

    PaaS优点与限制(3) PaaS学习笔记目录 PaaS基础学习(1) 在PaaS上开发Web.移动应用(2) PaaS优点与限制(3) 13. PaaS的核心服务 核心服务是指提供数据存储.SQl. ...

  7. Android中的ListView属性使用总结

    Android中使用ListView控件比较常见,如果能知道常用的一些属性使用,肯定会少很多坑. 1.ListView是常用的显示控件,默认背景是和系统窗口一样的透明色,如果给ListView加上背景 ...

  8. [Ubuntu]“ubuntu.sh: 113: ubuntu.sh:Syntax error: "(" unexpected ”报错解决方法

    原因:有可能是兼容性问题 解决方法: 1.sudo dpkg-reconfigure dash   2.在弹出的窗口选择no

  9. Javafinal变量

    class Test02 {     public static void main(String args[]){         final int x;         x = 100; //  ...

  10. 使用JavaScript ES6的新特性计算Fibonacci(非波拉契数列)

    程序员面试系列 Java面试系列-webapp文件夹和WebContent文件夹的区别? 程序员面试系列:Spring MVC能响应HTTP请求的原因? Java程序员面试系列-什么是Java Mar ...