<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="utf-8" />

     <title></title>

   <style>

   div { margin:3px; width:40px; height:40px;

         position:absolute; left:0px; top:30px;

         background:green; display:none; }

   div.newcolor { background:blue; }

   </style>

   <script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>

 </head>

 <body>

   请点击这里。。。

   <div></div>

 <script>

     $(document.body).click(function () {

         $("div").show("slow");

         $("div").animate({left:'+=200'},2000,function(){

             $("div").addClass("newcolor");//将需要执行的js代码，加在动画的回调函数中也行

         });

         // $("div").queue(function () {

         //   $(this).addClass("newcolor");

         //   $(this).dequeue();

         // });

         // $("div").addClass("newcolor");//这种执行失败了，因为动画是延迟排队加载，这个先于动画加载了

         $("div").animate({left:'-=200'},500,function(){

             $("div").removeClass("newcolor");

         });

         // $("div").queue(function () {

         //   $(this).removeClass("newcolor");

         //   $(this).dequeue();

         // });

         // $("div").removeClass("newcolor");//执行失败

         $("div").slideUp();

         //动画都是异步加载的，但是他们会排队，一个一个执行，但是中间如果要插入一段js执行，则可能必须要加在动画的回调函数中，

         //才能确保它能顺利执行

         //但是queue()函数，可以在动画执行队列中，也不需要加在回调函数中

         //用了queue()函数之后，必须同时搭配dequeue()函数，这样才能执行下一个函数

         // clearQueue()是清除所有未执行的动画，包括queue()插入的

     });

 </script>

 </body>

 </html>

jQuery方法-queue()的更多相关文章

  1. 关于Plupload结合上传插件jquery.plupload.queue的使用

    之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!! plupload 是款很强大的上传组件,不得不推荐.plupload 前端根据浏览器不同选择使用Html5. Gears, Sil ...

  2. JQuery方法总结

    JQuery方法总结 Dom: Attribute:(属性) $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img"). ...

  3. 1.4 jQuery方法，JSON介绍

    jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...

  4. SpringMVC框架下实现JSON（类方法中回传数据到jsp页面，使用jQuery方法回传）

    JSON的实现,即将需要的数据回传到jsp页面: 1>.加入实现Json的三个架包到lib中:2>.目标方法上边加入注解,需要返回的值3>.在jsp页面中书写jQuery方法: ec ...

  5. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. JQuery 方法简写

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. Jquery方法load之后导致js失效解决方法

    Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...

  8. Javascript或jQuery方法产生任意随机整数

    方法1:javascritp方法 1 2 3 4 5 6 //随机数    function diu_Randomize(b,e){        if(!b && b!=0 || ! ...

  9. jquery方法详解

    jquery方法详解 http://www.365mini.com/doc

随机推荐

  1. CG-CTF web部分wp

    bin不动了,学学webWEB1,签到1f12,得到flag2,签到2给了输入窗口和密码,但输入后却显示错误,查看源码,发现对输入长度进行了限制,改下长度,得到flag3,md5 collision给 ...

  2. element ui step组件在另一侧加时间轴显示

    这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...

  3. svnserve.conf - snvserve 的仓库配置文件

    SYNOPSIS 总览 repository-path/conf/svnserve.conf DESCRIPTION 描述 每个代码仓库都有一个 svnserve.conf 文件来控制 svnserv ...

  4. Mac下homebrew的安装与卸载

    mac系统常用的软件安装工具就是homebrew 个人认为通过brew安装比较简单,下面介绍下如何安装 安装和卸载homebrew 安装 /usr/bin/ruby -e "$(curl - ...

  5. 每天一个Linux常用命令 命令

    指令名称 : chmod 使用权限 : 所有使用者 使用方式 :chmod 777 /root 第一个7指文件所属用户,第二个7指文件所属用户的用户组,第三个7指其他用户 说明 : Linux/Uni ...

  6. 【Luogu】【关卡2-16】线性动态规划（2017年10月）【还差三道题】

    任务说明:这也是基础的动态规划.是在线性结构上面的动态规划,一定要掌握. P1020 导弹拦截 导弹拦截 P1091 合唱队形 老师给同学们排合唱队形.N位同学站成一排,音乐老师要请其中的(N-K)位 ...

  7. Java的HashMap和Hashtable有什么区别HashSet和HashMap有什么区别？使用这些结构保存的数需要重载的方法是哪些？

    HashMap与Hashtable实现原理相同,功能相同,底层都是哈希表结构,查询速度快,在很多情况下可以互用 两者的主要区别如下 1.Hashtable是早期JDK提供的接口,HashMap是新版J ...

  8. Kylin-2.6.2集群部署

    1. 集群节点规划与说明 rzx1 all rzx2 query rzx3 query 说明: Kylin节点角色有三种: all: 包含query和job query: 查询节点 job: 工作节点 ...

  9. mongodb客户端操作常用命令（续）

    之前有写过一篇mongodb客户端的操作常用命令 ,今天接着来记录分享一些关于mongodb账户权限设置的命令操作 上期mongodb客户端的操作常用命令地址:https://www.cnblogs. ...

  10. 【Flutter学习】基本组件之容器组件Container

    一,前言 Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Conta ...