jQuery应用实例2：简单动画
生活随笔
收集整理的這篇文章主要介紹了
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：简单动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css html应用实例1：滑动门技术的
- 下一篇： 深入了解React组件重新渲染的条件和生