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的IE和Firefox兼容性汇编
Jul 01 Javascript
漂亮的提示信息(带箭头)
Mar 21 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
angular组件间传值测试的方法详解
May 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
php 静态化实现代码
2009/03/20 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
python实现划词翻译
2020/04/23 Python
使用python Django做网页
2013/11/04 Python
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
python实现网页自动签到功能
2019/01/21 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
降低python版本的操作方法
2020/09/11 Python
Python使用xpath实现图片爬取
2020/09/16 Python
英国医生在线预约:Top Doctors
2019/10/30 全球购物
C有"按引用传递"吗
2016/09/06 面试题
黄河象教学反思
2014/02/10 职场文书
追悼会答谢词
2015/01/05 职场文书
小学语文复习计划
2015/01/19 职场文书
小学教师年度个人总结
2015/02/05 职场文书
餐馆开业致辞
2015/08/01 职场文书
python计算列表元素与乘积详情
2022/08/05 Python