案例:jQuery案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <style>
5
  div { margin:3px; width:40px; height:40px;
6
    position:absolute; left:0px; top:30px; 
7
    background:green; display:none; }
8
  div.newcolor { background:blue; }
9
  </style>
10
11
  <script type="text/javascript" src="/js/jquery.js"></script>
12
</head>
13
14
<body>
15
16
<button id="start">开始</button>
17
<button id="stop">停止</button>
18
<div></div>
19
20
<script>
21
$("#start").click(function () {
22
  $("div").show("slow");
23
  $("div").animate({left:'+=200'},5000);
24
  $("div").queue(function () {
25
    $(this).addClass("newcolor");
26
    $(this).dequeue();
27
  });
28
  $("div").animate({left:'-=200'},1500);
29
  $("div").queue(function () {
30
    $(this).removeClass("newcolor");
31
    $(this).dequeue();
32
  });
33
  $("div").slideUp();
34
});
35
$("#stop").click(function () {
36
  $("div").clearQueue();
37
  $("div").stop();
38
});
39
</script>
40
41
42
</body>
43
</html>
44