案例：jQuery UI案例     状态：可编辑再运行    进入竖版
 运行结果　
AخA
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 特效 - 动画（Animation）演示</title>
6
  <link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
7
  <script src="/js/jqu/jquery.min1.10.2.js"></script>
8
  <script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
9
  <link rel="stylesheet" href="jqueryui/style.css">
10
  <style>
11
    .toggler { width: 500px; height: 200px; position: relative; }
12
    #button { padding: .5em 1em; text-decoration: none; }
13
    #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
14
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
15
  </style>
16
  <script>
17
  $(function() {
18
    var state = true;
19
    $( "#button" ).click(function() {
20
      if ( state ) {
21
        $( "#effect" ).animate({
22
          backgroundColor: "#aa0000",
23
          color: "#fff",
24
          width: 500
25
        }, 1000 );
26
      } else {
27
        $( "#effect" ).animate({
28
          backgroundColor: "#fff",
29
          color: "#000",
30
          width: 240
31
        }, 1000 );
32
      }
33
      state = !state;
34
    });
35
  });
36
  </script>
37
</head>
38
<body>
39
40
<div class="toggler">
41
  <div id="effect" class="ui-widget-content ui-corner-all">
42
    <h3 class="ui-widget-header ui-corner-all">动画（Animation）</h3>
43
    <p>
44
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
45
    </p>
46
  </div>
47
</div>
48