<!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. 9、springcloud整合logback打印sql语句

    Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core.logback- classic和logback-access.logback-c ...

  2. 使用vue.js开发小程序

    写在前面 刚刚开源的mpvue引起了不少前端er们的注意,下图是一个简单的对比. 话不多说,我们现在感受一下如何使用mpvue开发小程序.(以下内容参照mpvue文档完成). 开发环境 node np ...

  3. Redis Desktop Manager连接Redis 遇到的一系列问题

    最近在做一个土地项目的后台,主要是一个信息采集调查系统,使用的框架是: * 核心框架:Spring Framework 4.2 * 日志管理:SLF4J 1.7.Log4j 1.2 * 视图框架:Sp ...

  4. OK。第一个shell script 脚本

    很简单吧.也很容易理解.读取两个字符放到变量firstname和lastname中,然后输出 编辑日期格式 上面是编辑日期格式.下面的例题是按照日期格式来分类创建文件

  5. Linux下Golang Socket编程原理分析与代码实现

    在POSIX标准推出后,socket在各大主流OS平台上都得到了很好的支持.而Golang是自带Runtime的跨平台编程语言,Go中提供给开发者的Socket API是建立在操作系统原生Socket ...

  6. 查看crontab执行记录

    如果出现了crontab定时任务不执行的情况,首先需要定位问题,那么就需要通过日志来确定问题所在. crontab的日志位置一般位于/var/log/cron,利用下面的语句即可查看日志. tail ...

  7. js实现复制|剪切指定内容到粘贴板--clipboard

    这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下.项目地址:https://github.com/zenorocha/clipboard ...

  8. USB之Main item, Local item和Global item 的作用范围与归类

    https://doc.micrium.com/display/OSUM50300/USB+Device+HID+Class+Overview report descriptor –> item ...

  9. Sqlserver复杂查询

    --联表修改 update xyzrb set xyzrb.xy_card=tablsb.card from xyzrb left join tablsb on xyzrb.xybh=tablsb.x ...

  10. 线性dp——1197D

    一开始没有什么头绪,后来注意到m<=10,考虑是否可以用dp[i][j]表示第i位,前面跟了j个数的最大值 那么第i+1个数,直接和第i个数的[0,m]的m+1种状态去转移即可,如果是由0或m状 ...