效果：

代码：

 <!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. C# 5.0新加特性

    1. 异步编程 在.Net 4.5中,通过async和await两个关键字,引入了一种新的基于任务的异步编程模型(TAP).在这种方式下,可以通过类似同步方式编写异步代码,极大简化了异步编程模型.如下 ...

  2. 杭电 1021 Fibonacci Again

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1021 解题思路:根据之前发现斐波那契数列的规律,即为f(n)能被3整除当且仅当n能被4整除. 于是联想 ...

  3. 初步学习Axure---整理了一下自己两周的学习成果：动态面板

    自己无意间发现了做原型设计的工具--Axure,所以就自学了一点皮毛.最近时间比较充裕,就把自己现学现卖的东西整一整. 作品比较简单,没有技术可言,根据用户和开发需求,利用动态面板和一些点击事件完成了 ...

  4. bootstrap初用新得1

    ## 基本准备 1. 首先把相关软件窗口规划好,对于我的喜好,我喜欢把除了浏览器外的其他软件分为左右两个半屏.左边和右边很多软件之间是需要配合使用的:     * 左边: scss文件,ps的guid ...

  5. IdentityServer4-HybridAndClientCredentials

    一.服务器 Client设置: new Client { ClientId = "mvc1", ClientName = "后台管理MVC客户端", Clien ...

  6. hibernate一对多和多对一配置

    public class Dept { private int deptId; private String deptName; // [一对多] 部门对应的多个员工 private Set<E ...

  7. Nginx+php-fpm 502 504问题

    常出现502,504错误 思路: 增大nginx与php-fpm通信时的缓存文件大小与个数 静态绑定5个php-fpm进程,减少频率启动进程的开销 利用sock文件代替tcp端口通信 解决办法: 调整 ...

  8. 关于linux系统的sendmail使用中的问题与解决

    系统环境是ubuntu16.04 安装 sudo apt-get install sendmail 检查运行情况 sudo service sendmail status 结果如下,表示正在运行 ● ...

  9. Spring 静态工厂实例

    直接上代码,看注释. 创建实体类: package com.spring.classs; public class Test {    private String name;    private ...

  10. NOIP2018提高组省一冲奖班模测训练（六）

    NOIP2018提高组省一冲奖班模测训练(六) https://www.51nod.com/Contest/ContestDescription.html#!#contestId=80 20分钟AC掉 ...