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 相关文章推荐
基于jquery循环map功能的代码
Feb 26 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
canvas红包照片实例分享
Feb 28 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
js实现九宫格抽奖
Mar 19 Javascript
JavaScript 闭包的使用场景
Sep 17 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
纯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
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
PHP中list方法用法示例
2016/12/01 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
python读取和保存视频文件
2018/04/16 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
连锁经营管理专业大学生求职信
2013/10/30 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
2014年维修工作总结
2014/11/22 职场文书
政协常委会议主持词
2015/07/03 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
一年级语文教学随笔
2015/08/14 职场文书
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python