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,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- go系列(1)- linux下安装go环境
安装GO 打开安装包下载地址,查看linux下go的最新版本 https://golang.google.cn/dl/ 经查看go的最新版本为go1.11.4.linux-amd64.tar.gz 右 ...
- js中的同步和异步的个人理解(转)
你应该知道,javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流 ...
- Codeforces 1142C(转化、凸包)
可以变换坐标:x' = x, y' = y - x ^ 2,如此之后可得线性函数x' * b + c = y',可以发现两点连边为抛物线,而其他点都在这条线下方才满足题意,故而求一个上凸壳即可. #i ...
- Gym - 101810E ACM International Collegiate Programming Contest (2018)
bryce1010模板 http://codeforces.com/gym/101810 #include<bits/stdc++.h> using namespace std; #def ...
- c 语言写的高级Oracle®数据库调优及监控工具
http://www.lab128.com.cn/lab128_why.html ###另外一款ORALCE Monitor tool freee https://www.myorasql.com/ ...
- max713镍氢电池充电管理IC
PDF:https://datasheets.maximintegrated.com/en/ds/MAX713SWEVKIT.pdf http://www.ixueshu.com/document/b ...
- ztr loves lucky numbers 傻逼的我来了个大模拟
http://acm.hdu.edu.cn/showproblem.php?pid=5676 这题的正解因该是dfs的,但是有18个位,然后我一算,全排列的话,有18!个啊,那不是很大?但是有很多是相 ...
- Linux下命令行中的复制和粘贴
安装gpm:yum install -y gpm* 开启gpm服务:systemctl start gpm 按住鼠标左键,选中想要复制的内容,松开就完成复制,再在复制的位置按右键就完成粘贴.
- ubuntu中使用eclipse开发android,logcat显示问题
〜/工作区/ .metadata / .plugins / org.eclipse.core.runtime / .settings / com.android.ide.eclipse.ddms.pr ...
- matlab载入图像,旋转,裁剪 保存
clc;clear all;close all src=imread('C:\Users\think\Desktop\12.jpg'); subplot(,,) imshow(src); I = ma ...