案例：jQuery UI案例     状态：可编辑再运行    进入竖版
 运行结果　
AخA
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 特效 - .toggle() 演示</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 {
12
    width: 500px;
13
    height: 200px;
14
  }
15
  #button {
16
    padding: .5em 1em;
17
    text-decoration: none;
18
  }
19
  #effect {
20
    position: relative;
21
    width: 240px;
22
    height: 135px;
23
    padding: 0.4em;
24
  }
25
  #effect h3 {
26
    margin: 0;
27
    padding: 0.4em;
28
    text-align: center;
29
  }
30
  </style>
31
  <script>
32
  $(function() {
33
    // 运行当前选中的特效
34
    function runEffect() {
35
      // 从中获取特效类型
36
      var selectedEffect = $( "#effectTypes" ).val();
37
38
      // 大多数的特效类型默认不需要传递选项
39
      var options = {};
40
      // 一些特效带有必需的参数
41
      if ( selectedEffect === "scale" ) {
42
        options = { percent: 0 };
43
      } else if ( selectedEffect === "size" ) {
44
        options = { to: { width: 200, height: 60 } };
45
      }
46
47
      // 运行特效
48
      $( "#effect" ).toggle( selectedEffect, options, 500 );