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 23 Javascript
Javascript Object.extend
May 18 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 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代码审计比较有意思的例子
2014/05/07 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
Vue异步加载about组件
2017/10/31 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
用python读写excel的方法
2014/11/18 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
django定期执行任务(实例讲解)
2017/11/03 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
python中os.remove()用法及注意事项
2021/01/31 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
人力资源专业推荐信
2013/11/29 职场文书
关于运动会的口号
2014/06/07 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
2014年采购工作总结
2014/11/20 职场文书
工程资料员岗位职责
2015/04/13 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
MySQL优化及索引解析
2022/03/17 MySQL