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 04 Javascript
学习ExtJS table布局
Oct 08 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
vue中的scope使用详解
Oct 29 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 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/03/11 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
Prototype Function对象 学习
2009/07/12 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
npm的lock机制解析
2019/06/20 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
详解Vite的新体验
2021/02/22 Javascript
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
一看就懂得Python的math模块
2018/10/21 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
python try...finally...的实现方法
2020/11/25 Python
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
采购部主管岗位职责
2014/01/01 职场文书
七年级音乐教学反思
2014/01/26 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
Python实现双向链表基本操作
2022/05/25 Python