<!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( ...