jQuery中:animated选择器用法实例


Posted in Javascript onDecember 29, 2014

本文实例讲述了jQuery中:animated选择器用法。分享给大家供大家参考。具体分析如下:

此选择器匹配所有正在执行动画效果的元素。
可以使用animate()方法创建自定义动画。

语法结构:

$(":animated")

此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如:
$("li:animated").css("background-color","blue")

以上代码能够将正在执行动画下过的li元素的背景颜色设置为蓝色。
如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":animated")等同于$("*:animated")。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

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

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

<style type="text/css">

li{

  list-style-type:none;

  width:150px;

  height:30px;

}

.run{background-color:green;}

.static{background-color:#603;}

</style>

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

<script type="text/javascript"> 

$(document).ready(function(){ 

  function runit(){ 

    $(".run").animate({width:"250px"}); 

    $(".run").animate({width:"150px"},runit); 

  } 

  $("button").click(function(){ 

    runit(); 

    $("li:animated").css("background-color","blue"); 

  }) 

}) 

</script>

</head>

<body>

<ul>

  <li class="run"></li>

  <li class="static"></li>

</ul>

<button>点击开始动画</button>

</body>

</html>

以上可以将动画元素的背景颜色设置为蓝色。

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

Javascript 相关文章推荐
javascript parseInt与Number函数的区别
Jan 21 Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
javascript实现画板功能
Apr 12 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 #Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 #Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 #Javascript
jQuery中:header选择器用法实例
Dec 29 #Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 #Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 #Javascript
JavaScript中的数学运算介绍
Dec 29 #Javascript
You might like
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
php中错误处理操作实例分析
2019/08/23 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python高级property属性用法实例分析
2019/11/19 Python
如何基于python操作json文件获取内容
2019/12/24 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
会计助理的岗位职责
2013/11/29 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
毕业评语大全
2014/05/04 职场文书
诚信考试标语
2014/06/24 职场文书
写得不错的求职信范文
2014/07/11 职场文书
党员志愿者活动方案
2014/08/28 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书