jQuery应用实例2：简单动画

效果：

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script type="text/javascript " src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 7 <style>
 8     *{padding: 0px;margin: 20px;}
 9         li{10             width: 250px;height:300px;
11             float: left;background-color:#e60;
12             list-style: none;
13             transition:width 1s;/*<!--过渡-->*/
14         }
15         @keyframes myself{16             0%{background:orange;}/*从0%到100%发生了什么*/
17             25%{background:red;}
18             50%{background:gray;}
19             100%{background:blue;transform:translate(100px,100px);}
20         }
21         .donghua{22             animation:myself 3s;}
23         li:hover{24             transform:translate(10px,10px),width:200px;}/*translate是平移，ralate是旋转*/
25 </style>
26 </head>
27
28 <body>
29 <div>
30     <ul>
31     <li></li>
32     <li></li>
33     <li></li>
34     <li></li>
35     <li></li>
36     </ul>
37 </div>
38
39 </body>
40 <script>
41     $(function(){
42         $("li").click(function(){
43                 var $x=$(this);
44                 var $y=$x.index();
45                 $x.addClass("donghua");
46                 //如果不移除样式，运行一遍后将没有反应，因为它们已经被赋予样式了
47                 setTimeout(function(){$x.removeClass("donghua");},3000);
48                 /*
49                 $("li").eq($y).addClass("donghua");//$x和$("li").eq($y)效果一样
50                 setTimeout(function(){$("li").eq($y).removeClass("donghua");},3000);
51                 */
52
53             })
54         })
55
56 </script>
57 </html>

View Code

:eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。

经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素（如上面的例子）。

更多专业前端知识，请上【猿2048】www.mk2048.com

jQuery应用实例2：简单动画相关推荐

HTML5+CSS3+JQuery小实例：简单又令人惊艳的hover效果登录界面
今天给大家带来一个小案例,HTML5+CSS3+JQuery实现简单又令人惊艳的hover效果登录界面. 先看效果: 源代码: <div class="container"& ...
【jQuery小实例】---2自定义动画
---本系列文章所用使用js均可在本博客文件中找到本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果.和一个类似qq面板效果.大致也分为三步:添加jquery-1.8.3.js文件.这个是不 ...
网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
jQuery Ajax 实例 ($.ajax、$.post、$.get)
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:h ...
jQuery Ajax 实例全解析(转)
jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...
css 右上角翻开动画_css简单动画（transition属性）
一.对transition属性的认识 1.transition 属性是一个简写属性,可用于设置四个过渡属性: transition-property 过渡效果的 CSS 属性的名称(heigh ...
jQuery Ajax 实例
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:h ...
ECSHOP中transport.js和jquery的冲突的简单解决办法
ECSHOP中transport.js和jquery的冲突的简单解决办法一流资源网近日在ECSHOP网站加入了几个JS特效代码,在谷歌.火狐下正常,在各版本IE下都不常,左思不得其解. 最后才知道原 ...
iOS CAReplicatorLayer 简单动画
代码地址如下: http://www.demodashi.com/demo/11601.html 写在最前面,最近在看学习的时候,偶然间发现一个没有用过的Layer,于是抽空研究了下,本来应该能提前记 ...
四、jQuery 中的事件和动画(嘎嘎详细)
文章目录前言一.事件 1.1 加载 DOM 1.1.1 执行时机 1.1.2 多次使用 1.1.3 简写方式 1.2 事件绑定 1.2.1简单使用 1.2.2 简写绑定事件 1.3 合成事件 1. ...

jQuery应用实例2：简单动画

jQuery应用实例2：简单动画相关推荐

最新文章

热门文章