jQuery中clearQueue()方法用法实例


Posted in Javascript onDecember 29, 2014

本文实例讲述了jQuery中clearQueue()方法用法。分享给大家供大家参考。具体分析如下:

此方法能够清空对象上尚未执行的所有队列。

如果不带参数,则默认清空的是动画队列。这跟stop(true)类似,但stop()只能清空动画队列,而这个可以清空所有通过queue()创建的队列。

语法结构:

$(selector).clearQueue(queueName)

参数列表:

参数 描述
queueName 可选。定义要停止的队列的名称。 默认是 "fx",动画队列。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

#father 

{

  background:#060;

  width:300px;

  height:300px;

}

#box 

{

  background:red;

  height:50px;

  width:50px;

  position:relative

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">  

$(document).ready(function(){ 

  $("#start").click(function(){ 

    $("#box").animate({height:200},"slow"); 

    $("#box").animate({width:200},"slow"); 

    $("#box").animate({height:50},"slow"); 

    $("#box").animate({width:50},"slow"); 

  }); 

  $("#clear").click(function(){ 

    $("#box").clearQueue(); 

  }); 

}); 

</script>

</head>

<body>

<p>

  <button id="start">开始执行动画</button>

  <button id="clear">清除队列</button>

</p>

<div id="father">

  <div id="box"></div>

</div>

</body>

</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
js常用排序实现代码
Dec 28 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 #Javascript
浅谈JavaScript Array对象
Dec 29 #Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 #Javascript
jQuery中dequeue()方法用法实例
Dec 29 #Javascript
jQuery中queue()方法用法实例
Dec 29 #Javascript
浅谈JavaScript function函数种类
Dec 29 #Javascript
JavaScript异步加载浅析
Dec 28 #Javascript
You might like
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
PHP制作图型计数器的例子
2006/10/09 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
XML的代替者----JSON
2007/07/21 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python中super关键字用法实例分析
2015/05/28 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Python range与enumerate函数区别解析
2020/02/28 Python
python3 logging日志封装实例
2020/04/08 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
PHP面试题及答案一
2012/06/18 面试题
开业庆典邀请函
2014/01/08 职场文书
十八大闭幕感言
2014/01/22 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
工业设计专业自荐书
2014/06/05 职场文书
前台接待员岗位职责
2015/04/15 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
idea下配置tomcat避坑详解
2022/04/12 Servers
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL