<!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. vue做一个上移和下移,删除的li 功能

    效果图: 思路就是冒泡原理,把数据放到一个空数组,对其进行排序, 单选框用到的是iview . 具体实现代码: <div v-for="item in singledLists&quo ...

  2. css3两个汤圆亲吻动效

    效果图: 模板来源:https://www.17sucai.com/pins/demo-show?id=35132 自己仿写出来的效果图: 笔记: 1.transform:translate(-50% ...

  3. 嵌入式平台 RAM与ROM区分

    ROM(Read Only Memory)和RAM(Random Access Memory)指的都是半导体存储器,ROM在系统停止供电的时候仍然可以保持数据,而RAM通常是在掉电之后就丢失数据,典型 ...

  4. Linux运行jar包

    要运行java的项目需要先将项目打包成war包或者jar包,打包成war包需要将war包部署到tomcat服务器上才能运行.而打包成jar包可以直接使用java命令执行. 在linux系统中运行jar ...

  5. v-model 双向数据绑定以及修饰符

    <!--v-model 实现双向数据绑定 其中一个值发生改变,另一个值也将实时发生改变--> <div id="app09"> <h1>{{ m ...

  6. WarUtil

    /** *包名:cn.yufu.utils *描述:package cn.yufu.utils; */ package cn.yufu.utils; import java.io.File; impo ...

  7. centos7安装kylo0.10.1

    安装环境centos7,kylo版本0.10.1 常用的链接地址 kylo官网:https://kylo.io/ kylo文档:https://kylo.readthedocs.io/ 下载地址 官网 ...

  8. java_monitor

    转载自http://blog.sina.com.cn/s/blog_9385f6d90101dbqy.html java会为每个object对象分配一个monitor,当某个对象的同步方法(synch ...

  9. vscode gp 安装第三方包

    由于code.google.com被墙,导致一些托管在code.google.com上面的包go get不下来,此功能就是用于解决这个问题. http://www.golangtc.com/downl ...

  10. Windows 驱动模型的发展历史

    直接从win95/98说起,因为之前的系统基本上没有保护模式的概念,程序员可以直接修改任意内存的数据.在95/98中采用的内核开发模型是VxD(虚拟设备驱动),在dos时期,程序认为它们拥有系统的一切 ...