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工具库代码
Mar 29 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
JS二分查找算法详解
Nov 01 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
vue项目打包后路由错误的解决方法
Apr 13 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
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php微信支付接口开发程序
2016/08/02 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Python列表操作方法详解
2020/02/09 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
简单了解如何封装自己的Python包
2020/07/08 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
家长寄语大全
2014/04/02 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
mysql sock 文件解析及作用讲解
2022/07/15 MySQL