对非动画的实现排队,比如这个css()是要放在回调函数里才能,让前面的动画执行完成后在进行实现

 $('button').click(function(event) {
$(this).next().animate({'left':'300px','height':'100px'},3000)
.animate({'top':'200px','width':'100px'},3000,function(){
$(this).css('background','red');
})
});
// $('button').trigger('click'); 自动执行函数

 html

    <button>点击执行</button>
<div>
动画排队
</div>

css

*{margin: 0; padding: 0;list-style: none;}
div{width: 300px;height: 200px;background-color:pink;margin:20px;text-align: center;line-height: 200px;position:absolute;}
button{margin:50px;}

animate动画回调函数的更多相关文章

  1. 关于transition回调函数的几种写法

    平时工作中经常遇到需要transition动画结束后触发某个功能的问题,但是在映像中好像只见过animate的回调函数, 而transition的很多属性无法在animate中使用,经过一些总结归纳, ...

  2. 如何写JavaScript中的callback回调函数

    如何写回调函数? 如果自己在写一个方法或函数,你有可能会遇到需要一个回调函数.下面就是一个简单的常见回调函数例子: function mySandwich(param1, param2, callba ...

  3. JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度

    封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...

  4. JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数

    封装缓动(变速)动画函数---增加任意多个属性&增加回调函数 回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()}; 这样一次点击,产生多个动画 & ...

  5. jQuery基础的动画里面的回调函数

    <style> *{margin:0; padding:0;} #target{ border-radius:10px; background:#eee; } .fade{/*动画起始状态 ...

  6. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  7. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  8. Unity---DOTween插件学习(2)---设置参数、Ease曲线、回调函数、动画控制函数

    目录 6.Set设置参数 7.Ease曲线 8.回调函数 9.动画控制函数 本文及系列参考于Andy老师的DOTween系列 欢迎大家关注Andy老师 6.Set设置参数 在Unity中添加一个Cub ...

  9. jquery动画函数里面可以跟一个回调函数,表示动画结束后执行的代码

    jquery动画函数里面可以跟一个回调函数,表示动画结束后执行的代码 使用js监听动画结束后进行的操作: $ele.fadeIn(300,function(){...}) $ele.fadeOut(3 ...

随机推荐

  1. div+css网页标准布局实例教程(二)

    五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...

  2. 001-GPG入门教程

    对信息加密和解密.需要用到GnuPG软件(简称GPG),它是目前最流行.最好用的加密工具之一. 一.什么是GPG 要了解什么是GPG,就要先了解PGP. 1991年,程序员Phil Zimmerman ...

  3. 万恶之源 - Python基础数据类型三

    字典 字典的简单介绍 字典(dict)是python中唯⼀的⼀个映射类型.他是以{ }括起来的键值对组成. 在dict中key是 唯⼀的.在保存的时候, 根据key来计算出⼀个内存地址. 然后将key ...

  4. [LeetCode] 172. Factorial Trailing Zeroes_Easy tag: Math

    Given an integer n, return the number of trailing zeroes in n!. Example 1: Input: 3 Output: 0 Explan ...

  5. [转]一步一步玩控件:自定义TabControl——从山寨Safari开始

    作者:野比 (conmajia@gmail.com) 时间:May, 2012 封面图片为野比原创,请勿未经允许私自引用 #1-1 嗯,各位,又是我,生物钟颠倒的家伙. 今天我要山寨的是大名鼎鼎的Ap ...

  6. c# 获取某个进程的CPU使用百分百(类似任务管理器中显示CPU)

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  7. sql 各种锁

    SELECT * FROM table WITH (HOLDLOCK) 注意: 锁定数据库的一个表的区别 SELECT * FROM table WITH (HOLDLOCK) 其他事务可以读取表,但 ...

  8. mysql的innodb存储引擎和myisam存储引擎的区别

    主要区别如下: 1.事务支持.innodb支持事务,事务(commit).回滚(rollback)和崩溃修复能力(crash recovery capabilities)的事务安全(transacti ...

  9. 服务器返回的json数据中含有null的处理方法

    个人博客:http://guohuaden.com/2017/03/06/json-dataNull/因为有遇到过类似情况,所以就想到了一些解决方法,并且实践了一下,这里简单的做个记录. 注:有看到不 ...

  10. netty4----日志框架的检查

    https://segmentfault.com/a/1190000005797595 2016年06月25日  ·  4.1k 次阅读 Netty4.x Internal Logger机制 nett ...