jQuery UI API - 震动特效(Shake Effect)


所属类别

特效(Effects)

用法

描述:垂直或水平方向多次震动元素。

  1. shake


参数类型描述默认值
directionString"left" 或 "right" 的值将水平震动元素,"up" 或 "down" 的值将垂直震动元素。该值指定元素沿轴线移动时第一步的方向。"left"
distanceNumber要震动的距离。20
timesInteger要震动的次数。3

实例

震动一个 div。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>震动特效(Shake Effect)演示</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <style>
  8.   #toggle {
  9.     width: 100px;
  10.     height: 100px;
  11.     background: #ccc;
  12.   }
  13.   </style>
  14.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  15.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  16. </head>
  17. <body>
  18.  
  19. <p>点击任意地方进行震动。</p>
  20. <div id="toggle"></div>
  21.  
  22. <script>
  23. $( document ).click(function() {
  24.   $( "#toggle" ).effect( "shake" );
  25. });
  26. </script>
  27.  
  28. </body>
  29. </html>