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 相关文章推荐
文本链接逐个出现的js脚本
Dec 12 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
js实现3d悬浮效果
Feb 16 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
electron实现静默打印的示例代码
Aug 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
PHP+MySQL修改记录的方法
2015/01/21 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
python批量图片处理简单示例
2019/08/06 Python
Python: 传递列表副本方式
2019/12/19 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
董事长助理工作职责范本
2014/07/01 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
财务审计整改报告
2014/11/06 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers