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 flash激活
Oct 19 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
javascript解析json实例详解
Nov 05 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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
我的论坛源代码(八)
2006/10/09 PHP
用PHP实现图象锐化代码
2007/06/14 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
javascript 节点遍历函数
2010/03/28 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python with用法实例
2015/04/14 Python
Python第三方库的安装方法总结
2016/06/06 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
写好自荐信的技巧
2013/11/08 职场文书
英文求职信写作小建议
2014/02/16 职场文书
干部对照检查材料范文
2014/08/26 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
2016新年问候语大全
2015/11/11 职场文书