Jquery 自定义动画同步进行如何实现?
需求描述:我需要对不懂的两个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 自定义动画同步进行如何实现?的更多相关文章
- js进阶 13-4 jquery自定义动画animate()如何使用
js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...
- 深入学习jQuery自定义动画
× 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...
- jQuery 自定义动画效果
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...
- Jquery自定义动画与动画队列
animate:自定义动画 $(selector).animate({params},[speed],[easing],[callback]); params:要执行动画的css属性,它是一个对象可以 ...
- jQuery——自定义动画
动画方法:animate(json,1000, function (){}) 参数说明:json代表属性设置,1000是动画时间,最后一个是回调函数,其中动画时间可选 属性支持:http://www. ...
- jQuery自定义动画
$(function(){ $(".btn1").click(function(){ $(','opacity':'toggle'}); }); $(".btn2&quo ...
- python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax
一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...
- jQuery Easing动画效果扩展(转)
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- 用css固定textarea文本域大小尺寸
textarea元素在chrome等浏览器下可以被拖拉从而改变大小,对于查看textarea里面的内容来说相当方便,但是有时候 我们为了保持网页的美观,不得不想要禁掉这个功能,禁止用户随意拉动text ...
- Codeforces 526F Pudding Monsters
先把题目抽象一下: 有一个静态的数组,求有多少个区间[i,j]满足:j-i==max{ai,...,aj}-min{ai,...,aj} 也就是要求max-min+i-j==0的区间数 所以肿么做呢? ...
- sql 规范
https://www.cnblogs.com/jacktang/archive/2012/09/25/2701301.html http://blog.csdn.net/ethan_fu/artic ...
- Masonry UIScrollView autolayout 的一个奇特的问题
事情是这样的.... 我一个工程里 一直使用的 masonry 做autolayout,有个gesturerReconizer的bug,找了很久,发现很奇怪一个现象: 我的某个view 是这样的 |- ...
- mybatis(错误) 项目启动时报“Result Maps collection already contains value forxxx”的解决方案
使用逆向工程生成代码时,一定要将原来的代码删除干净,如果覆盖的话,不是真正的覆盖,在原来的代码上增加重复的代码,导致出错
- 一图秒懂http与https的区别
HTTPS与HTTP的一些区别 HTTPS协议需要到CA申请证书,一般免费证书很少,需要交费. HTTP协议运行在TCP之上,所有传输的内容都是明文,HTTPS运行在SSL/TLS之上,SSL/TLS ...
- datetimepicker 插件位置问题解决经验
使用dadetimepicker进行时间选择是个很不错的选择,但是美中不足的是该插件在chrome中显示弹框的时候有时会出现位置错位的现象,而在IE中则没有这种现象,视图如图1 图1 查阅了网上的资料 ...
- SPOJ KATHTHI - KATHTHI(01BFS)
题意 给出一个$n \times m$的网格,每个位置有一个小写字母,初始在$(1, 1)$,每次可以向上下左右走,问走到$(n, m)$的最小花费 设$(x, y)$为当前位置,$(nx, ny)$ ...
- js如何调用电脑的摄像头
闲来无事,用js写了一个调用摄像头的demo,并用canvas显示保存.这个功能很实用,比如上传用户的头像,即时拍照及时上传. Html: <video width="200px&qu ...
- Git常用命令的使用方法
推荐一个比较好的GIT的教学地址,廖雪峰老师的git教程! 这里简述Git常用命令的使用方法: 一.初始化git 右键进入 Git Bash 1.建立身份信息 git config --global ...