案例：jQuery UI案例     状态：可编辑再运行    进入竖版
 运行结果　
AخA
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>转移特效（Transfer Effect）演示</title>
6
  <link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
7
  <style>
8
  div.green {
9
    width: 100px;
10
    height: 80px;
11
    background: green;
12
    border: 1px solid black;
13
    position: relative;
14
  }
15
  div.red {
16
    margin-top: 10px;
17
    width: 50px;
18
    height: 30px;
19
    background: red;
20
    border: 1px solid black;
21
    position: relative;
22
  }
23
  .ui-effects-transfer {
24
    border: 1px dotted black;
25
  }
26
  </style>
27
  <script src="/js/jqu/jquery.min1.10.2.js"></script>
28
  <script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
29
</head>
30
<body>
31
32
<div class="green"></div>
33
<div class="red"></div>
34
35
<script>
36
$( "div" ).click(function() {
37
  var i = 1 - $( "div" ).index( this );
38
  $( this ).effect( "transfer", { to: $( "div" ).eq( i ) }, 1000 );
39
});
40
</script>
41
42
</body>
43
</html>