1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme() + "://" 5 + request.getServerName() + ":" + request.getServerPort() 6 + path + "/"; 7 %> 8 9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 10 <html> 11 <head> 12 <base href="<%=basePath%>"> 13 14 <title>My JSP 'jquery.jsp' starting page</title> 15 16 <meta http-equiv="pragma" content="no-cache"> 17 <meta http-equiv="cache-control" content="no-cache"> 18 <meta http-equiv="expires" content="0"> 19 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 20 <meta http-equiv="description" content="This is my page"> 21 <script type="text/javascript" src="/common/easyui/jquery.min.js"></script> 22 <script type="text/javascript"> 23 $(document).ready(function(){ 24 function aniDiv(){ 25 $("#box").animate({300},"slow"); 26 $("#box").animate({100},"slow",aniDiv); 27 } 28 aniDiv(); 29 $(".btn1").click(function(){ 30 $(":animated").css("background-color","blue"); 31 }); 32 }); 33 </script> 34 <style type="text/css"> 35 div{ 36 background:#98bf21; 37 height:40px; 38 width:100px; 39 position:relative; 40 margin-bottom:5px; 41 } 42 </style> 43 </head> 44 <body> 45 <div></div> 46 <div id="box"></div> 47 <div></div> 48 <button class="btn1">Mark animated element</button> 49 </body> 50 </html>
重点解释：
26 $("#box").animate({100},"slow",aniDiv);
本行用了JQuery的animate方法，animate改变元素的状态，可以在W3SCHOOL中找到，aniDiv为改变元素后执行的方法，此处类似于循环了。
30 $(":animated").css("background-color","blue");
：animated
匹配所有正在执行动画的元素
相似知识点：
:eq(index)
匹配给定索引值的元素
$("tr:eq(1)")
选择第二个tr元素
:even
匹配所有索引值为偶数的元素，从 0 开始计数
$("tr:even")
从0开始匹配所有index为偶数的tr
：odd
匹配所有索引值为奇数的元素，从 0 开始计数
$("tr:odd")
从0开始匹配所有index为奇数的tr
:first
匹配找到的第一个元素
$("tr:first")
匹配找到的第一个tr元素
:last
匹配找到的最后一个元素
$("tr:last")
匹配找到的最后一个tr元素
:gt(index)
匹配所有大于给定索引值的元素
$("tr:gt(0)")
匹配所有索引大于0的tr元素
:lt(index)
匹配所有小于给定索引值的元素
$("tr:lt(2)")
匹配所有索引小于2的tr元素
:header
匹配标签为标题的元素h
$(":header").css("background", "#EEE");
设置标题的背景色为EEE
：not
去除所有与给定选择器匹配的元素
$("input:not(:checked)")
选择input不为checked的元素