案例: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>$("#start").click(function () {
21
      $("div").show("slow");
22
      $("div").animate({left:'+=200'},5000);
23
      $("div").queue(function () {
24
        $(this).addClass("newcolor");
25
        $(this).dequeue();
26
      });
27
      $("div").animate({left:'-=200'},1500);
28
      $("div").queue(function () {
29
        $(this).removeClass("newcolor");
30
        $(this).dequeue();
31
      });
32
      $("div").slideUp();
33
    });
34
    $("#stop").click(function () {
35
      $("div").queue("fx", []);
36
      $("div").stop();
37
    });</script>
38
39
</body>
40
</html>
41