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语言本身谈项目实战
Dec 27 Javascript
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
angular共享依赖的解决方案分享
Oct 15 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对mongodb的扩展(初出茅庐)
2012/11/11 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php购物车实现方法
2015/01/03 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
Python下singleton模式的实现方法
2014/07/16 Python
Python调用C语言开发的共享库方法实例
2015/03/18 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
解决Python二维数组赋值问题
2019/11/28 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
小学生暑假生活总结
2015/07/13 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python