效果：

代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script type="text/javascript " src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

 <style>

     *{padding: 0px;margin: 20px;}

         li{

             width: 250px;height:300px;

             float: left;background-color:#e60;

             list-style: none;

             transition:width 1s;/*<!--过渡-->*/

         }

         @keyframes myself{

             0%{background:orange;}/*从0%到100%发生了什么*/

             25%{background:red;}

             50%{background:gray;}

             100%{background:blue;transform:translate(100px,100px);}

         }

         .donghua{

             animation:myself 3s;}

         li:hover{

             transform:translate(10px,10px),width:200px;}/*translate是平移，ralate是旋转*/

 </style>

 </head>

 <body>

 <div>

     <ul>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     </ul>

 </div>

 </body>

 <script>

     $(function(){

         $("li").click(function(){

                 var $x=$(this);

                 var $y=$x.index();

                 $x.addClass("donghua");

                 //如果不移除样式，运行一遍后将没有反应，因为它们已经被赋予样式了

                 setTimeout(function(){$x.removeClass("donghua");},3000);

                 /*

                 $("li").eq($y).addClass("donghua");//$x和$("li").eq($y)效果一样

                 setTimeout(function(){$("li").eq($y).removeClass("donghua");},3000);

                 */

             })

         })

 </script>

 </html>

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

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

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

jQuery应用实例2：简单动画的更多相关文章

  1. 【Demo】jQuery 轮播图简单动画效果

    功能实现: (1)设定图片称号的鼠标悬停事件: (2)在事件中利用自定义动画函数调整显示图片,并修改对应标号样式: (3)为图片显示区域设定鼠标悬停事件: (4)当鼠标停在该区域时,清除图片切换动画定 ...

  2. jquery添加光棒效果的各种方式以及简单动画复杂动画

    过滤器.绑定事件.动画   一.基本过滤器 语法 描述 返回值 :first 选取第一个元素 单个元素 :last 选取最后一个元素 单个元素 :not(selector) 选取去除所有与给定选择器匹 ...

  3. 一个简单的jQuery插件开发实例

    两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...

  4. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  5. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  6. jquery翻页turnjs简单实例

    jquery翻页turnjs简单实例<pre><div id="flipbook"> <div class="hard" styl ...

  7. JQuery 基本使用、操作样式、简单动画

    JQ与JS JQ是JS写的插件库,就是一个JS文件 凡是用JQ能实现的,JS都能实现,JS能实现的,JQ不一定能实现 引入 BootCDN:https://www.bootcdn.cn/jquery/ ...

  8. 【jQuery小实例】---2自定义动画

    ---本系列文章所用使用js均可在本博客文件中找到 本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果.和一个类似qq面板效果.大致也分为三步:添加jquery-1.8.3.js文件.这个是不 ...

  9. jQuery中自定义简单动画的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  10. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

随机推荐

  1. redis启动出错 Creating Server TCP listening socket 127.0.0.1:6379: bind: No error解决办法

    windows下安装Redis第一次启动报错: [2368] 21 Apr 02:57:05.611 # Creating Server TCP listening socket 127.0.0.1: ...

  2. 任务调度开源框架Quartz概述

    任务调度开源框架Quartz 几乎每个项目中都用到了自动任务处理功能.所以在任务调度的功能很常用,但是一个好的任务调度程序是一个颇具挑战性的工作.最近用到Quartz这个框架,感觉很好,所以进行学习. ...

  3. Camera三维动画

    一.概述 在Android中说到3D开发,我们首先想到的是OpenGL,但用起来比较复杂繁琐,不适合做应用级别的3D变换.Android为我们提供了一个简化版的3D开发入口:Camera(这里的Cam ...

  4. 【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装

    // 选择框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...

  5. http-server 简介 复制的

    http-server 简介 https://blog.csdn.net/ithanmang/article/details/88375259http-server 是一个简单的零配置的命令行 htt ...

  6. JavaScript正则表达式总结

    同学们,今天给大家带来一篇正则表达式的总结,老规矩,先说下我们为什么要用正则?正则要用在什么地方? (个人理解的,大神轻喷) 正则很多时候要用于字符串操作,比如我们要把一个字符串里面的空格删除啊,替换 ...

  7. UVALive-8138 Number Generator 概率dp+优化

    题目链接:https://cn.vjudge.net/problem/UVALive-8138 题意 有一个随机数生成器,输出1-n的整数. 现在已经输出了k个数,问再取几个数才能使取出的所有数的个数 ...

  8. 训练1-E

    有二个整数,它们加起来等于某个整数,乘起来又等于另一个整数,它们到底是真还是假,也就是这种整数到底存不存在,实在有点吃不准,你能快速回答吗?看来只能通过编程. 例如: x + y = 9,x * y ...

  9. nyoj286-动物统计

    动物统计 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 在美丽大兴安岭原始森林中存在数量繁多的物种,在勘察员带来的各种动物资料中有未统计数量的原始动物的名单.科学家想判 ...

  10. MyBatis中动态SQL元素的使用

    掌握MyBatis中动态SQL元素的使用 if choose(when,otherwise) trim where set foreach <SQL>和<include> 在应 ...