<!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. Centos 文件权限修改

    1.查看权限 # ls -l dirPath 2.修改权限,root权限执行(-R 子目录的权限都会改变) # chmod -R dirPath

  2. byte为什么要与0xff

    面对带正负号的数,会采用符号扩展,如果原值是正数,则高位补上0:如果原值是负数,高位补1.二进制是计算技术中广泛采用的一种数制.二进制数据是用0和1两个数码来表示的数.当前的计算机系统使用的基本上是二 ...

  3. 读书笔记-----javascript基本数据类型

    由于js基础差, 记性也不好,准备一边读书一边做记录,希望这样能加深一下记忆 /*   第一天     */ javascript 基本数据类型 js一共只有五种数据类型 Undefined,  Nu ...

  4. Codeforces542E Playing on Graph 思维+DFS+BFS

    解法参考https://www.cnblogs.com/BearChild/p/7683114.html这位大佬的,这位大佬讲得很好了. 这道题还是有一定的思维的. 直接贴代码: #include&l ...

  5. 前端学习(十四）js回顾和定时器（笔记）

    回顾知识点:    作用域:        1.全局变量:在任何位置都可以使用的变量        2.局部变量:只能在函数内部使用的变量        3.闭包:子函数可以使用父函数的局部变量 -- ...

  6. java笔试常见的选择题

    1.已知表达式int m[] = {0,1,2,3,4,5,6}; 下面那个表达式的值与数组的长度相等()A m.length()B. m.lengthC. m.length()+1D. m.leng ...

  7. react 数据发生变化，页面改变的原理

    数据发生变化,页面改变的原理: 比较虚拟的dom 不怎么损耗性能,真实的dom比较会损耗性能 1.state 数据 2.jsx 模板 3.生成虚拟的dom 3.数据和模板结合,生成虚拟的dom 4.用 ...

  8. php手册的一些思考

    函数手册一定要认真看,很多用法都不太清楚:   array array_merge ( array $array1 [, array $... ] ) array_merge() 将一个或多个数组的单 ...

  9. Tomcat启动报：The Server time zone value 'XXXXX' 乱码问题解决

    今天给自己项目打包到服务器发布时,运行时,发现报 java.sql.SQLException: The server time zone value '�й���׼ʱ��' is unrecogniz ...

  10. 网关协议：CGI和WSGI

    通常服务器程序分为web服务器和应用程序服务器.web服务器是用于处理HTML文件,让客户可以通过浏览器进行访问,主流的web服务器有Apache.IIS.Nginx.lighthttpd等.应用服务 ...