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 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jquery offset函数应用实例
Nov 14 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
JS监听Esc 键触发事键
Apr 14 Javascript
详解CocosCreator项目结构机制
Apr 14 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的图形函数中显示汉字
2006/10/09 PHP
php中大括号作用介绍
2012/03/22 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
公司前台辞职报告
2014/01/19 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android