<!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. windows如何在当前路径下快速打开cmd

    直接在打开的文件夹地址栏当中输入cmd即可.

  2. BZOJ 1576: [Usaco2009 Jan]安全路经Travel

    日常自闭半小时后看题解,太弱了qwq. 感觉这道题还是比较难的,解法十分巧妙,不容易想到. 首先题目说了起点到每个点的最短路都是唯一的,那么对这个图求最短路图必定是一棵树,而且这棵树是唯一的. 那么我 ...

  3. Web UI开发神器—Kendo UI for jQuery数据管理之过滤操作

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  4. Cache技术―OSCache

    Cache技术―OSCache 版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明http://aumy2008.blogbus.com/logs/36462938.html 一.简介 ...

  5. [人物存档]【AI少女】【捏脸数据】朴素风格

    点击下载(城通网盘):AISChaF_20191115113752642.png 点击下载(城通网盘):AISChaF_20191111232359711.png

  6. Unity Log Path

    { //不是开场动画的LOG,是APK的 C:\Program Files\Unity\Editor\Data\PlaybackEngines\AndroidPlayer\Apk\res\mipmap ...

  7. d3js 折线图+柱图

    <!DOCTYPE html> <html> <body> <div id="vis"><svg></svg> ...

  8. jsp引擎是什么

    1.JSP引擎 执行JSP代码需要在服务器上安装JSP引擎,比较常见的引擎有webLogic和Tomcat.把这些支持JSP的web服务器配置好后,就可以在客户端通过浏览器来访问JSP页面了. 2.J ...

  9. P1064 金明的预算方案 （分组背包稍稍变形）

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NN元钱就行”. ...

  10. iOS 7 认识 TextKit

    本文由 伯乐在线 - 和谐老约翰 翻译自 Max Seelemann.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. iOS7 的发布给开发者的案头带来了很多新工具.其中一个就是 TextKit( ...