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,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- D. Merge Equals(from Educational Codeforces Round 42 (Rated for Div. 2))
模拟题,运用强大的stl. #include <iostream> #include <map> #include <algorithm> #include < ...
- Vuex目录结构推荐
目录结构如下: - src - store // 在src目录下 新建一个store文件夹 - mutations.js // mutations - mutaions_types.js // mut ...
- 选择器 nth-child和 nth-of-type的区别
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li&g ...
- 个人常用Git操作记录
本地分支与远程分支建立联系 Git - 新建本地分支与远程分支关联问题 查看本地分支与远程分支关系: git branch -vv 当前分支与远程分支建立关系: git branch --set-up ...
- cmder安装
官网地址:http://gooseberrycreative.com/cmder/ 一款非常漂亮好用的cmd工具. 在github或者官网下载后解压,点击Cmder.exe即可启动. 32位系统会遇到 ...
- Mysql5.7安装错误处理与主从同步及!
basedir=/iddbs/mysql-5.7.16 datadir=/iddbs/mysql5.7/data3306 一.自定义Mysql.5.7版本免编译安装: 1.Db-server1安装前期 ...
- Struts 2中访问Servlet API的几种方法小结
1.使用ActionContext Action运行期间所用到的数据都保存在ActionContext中,例如session.客户端提交的参数等,ActionContext是Action的一个上下文对 ...
- 接口文档管理工具rap
git地址: https://github.com/thx/RAP wiki : https://github.com/thx/RAP/wiki/home_cn 视频教程: http://thx.g ...
- C#入门笔记1
C#是用于创建要运行在.NET CLR上的应用程序的语言之一,从C和C++语言演化而来,是微软专门为使用.NET平台而创建的.优点:就是彻头彻尾为.NET Framework设计语言. C#能编写什么 ...
- Android开发笔记(一百四十三)任务调度JobScheduler
Android开发笔记(一百四十三)任务调度JobScheduler