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常用函数 不错
Sep 08 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
详解JavaScript栈内存与堆内存
Apr 04 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查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python友情链接检查方法
2015/07/08 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
毕业生文员求职信
2013/11/03 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
事业单位鉴定材料
2014/05/25 职场文书
企业员工集体活动方案
2014/08/17 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
Python标准库pathlib操作目录和文件
2021/11/20 Python
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL