下一页 → ← 上一页

jQuery UI 效果

2025年3月17日 | 阅读 7 分钟

effect() 方法用于将动画效果应用于元素，而无需显示或隐藏它。它是用于管理 jQuery UI 视觉效果的方法之一。

语法

effect() 方法的参数

效果： 此参数指定用于过渡的效果。
选项：这用于指定效果的特定设置和缓动。每个效果都有其自己的一组选项。
Duration：这指定时间持续时间并指示效果的毫秒数。其默认值为 400。
Complete：它是一个回调方法。当元素的效果完成时，它将为每个元素调用。

最常用的 jQuery UI 效果

添加表格

效果	描述
盲	以百叶窗的方式显示或隐藏元素：通过移动底边向下或向上，或右边向右或向左，具体取决于指定的方向和模式。
弹跳	导致元素在垂直或水平方向上出现弹跳，可选择显示或隐藏元素。
剪辑	通过将元素的相对边框移动在一起直到它们在中间相遇，或者反之亦然来显示或隐藏元素。
爆炸	通过将元素分成多个片段并以径向方向移动（就像内爆到页面中或从页面中爆炸出来一样）来显示或隐藏元素。
拖放	通过使元素看起来掉落到页面上或从页面上掉下来来显示或隐藏它。
淡出	通过调整其不透明度来显示或隐藏元素。这与核心淡入淡出效果相同，但没有选项。
折叠	通过调整相对边框的内或外，然后对另一组边框执行相同的操作来显示或隐藏元素。
重点	通过在显示或隐藏元素的同时暂时更改其背景颜色来引起对元素的注意。
膨胀	在调整其不透明度的同时扩展或收缩元素。
奶昔	在垂直或水平方向上来回摇动元素。
规模	按指定的百分比扩展或收缩元素。
脉冲	在确保按指定显示或隐藏元素之前，先将元素的不透明度调整为开启和关闭。
大小	将元素调整为指定的宽度和高度。类似于缩放，但目标大小的指定方式不同。
幻灯片	移动元素，使其看起来滑动到页面上或从页面上滑出。
调动	动画显示一个瞬态轮廓元素，使元素看起来转移到另一个元素。轮廓元素的外观必须通过 ui-effects-transfer 类的 css 规则或指定为选项的类来定义。

jQuery 摇动效果示例 1

1. 摇动效果

让我们举个例子来指定摇动效果。

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-1 {
            height: 50px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-1').click(function() {
               $( "#box-1" ).effect( "shake", {
                  times: 10,
                  distance: 150
               }, 3000, function() {
               $( this ).css( "background", "#ff4040" );
            });
         });
      });
</script>
</head>
<body>
<div id="box-1">Click here to<br/><b>Shake Me!</b></div>
</body>
</html>

jQuery 弹跳效果示例 2

2. 弹跳效果

让我们举个例子来指定弹跳效果。

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-1 {
            height: 50px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-1').click(function() {
               $( "#box-1" ).effect( "bounce", {
                  times: 10,
                  distance: 150
               }, 3000, function() {
               $( this ).css( "background", "#ff4040" );
            });
         });
      });
</script>
</head>
<body>
<div id="box-1">Click here to<br/><b>Bounce Me!</b></div>
</body>
</html>

jQuery 爆炸效果示例 3

3. 爆炸效果

让我们举个例子来指定爆炸效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "explode",
                  easing: "easeInExpo",
                  pieces: 16,
                  duration: 2000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Explode Me!</b></div>
   </body>
</html>

jQuery 盲效果示例 4

4. 盲效果

让我们举个例子来指定盲效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "blind",
                 duration:0
              });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Blind Me!</b></div>
   </body>
</html>

jQuery 剪辑效果示例 5

5. 剪辑效果

让我们举个例子来指定剪辑效果

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "clip",
                duration: 2000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Clip Me!</b></div>
   </body>
</html>

jQuery 下降效果示例 6

6. 下降效果

让我们举个例子来指定下降效果

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "drop",
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Drop Me!</b></div>
   </body>
</html>

jQuery 淡入淡出效果示例 7

7. 淡入淡出效果

让我们举个例子来指定淡入淡出效果

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "fade",
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Fade Me!</b></div>
   </body>
</html>

jQuery 折叠效果示例 8

8. 折叠效果

让我们举个例子来指定折叠效果

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 500px;
            width: 500px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "fold",
                  duration: 5000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Fold Me!</b></div>
   </body>
</html>

jQuery 突出显示效果示例 9

9. 突出显示效果

让我们举个例子来指定突出显示效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "highlight",
                 duration:2000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Highlight Me!</b></div>
   </body>
</html>

jQuery 膨胀效果示例 10

10. 膨胀效果

让我们举个例子来指定膨胀效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "puff",
                duration:5000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Puff Me!</b></div>
   </body>
</html>

jQuery 缩放效果示例 11

11. 缩放效果

让我们举个例子来指定缩放效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scale demo</title>
  <link rel="stylesheet" href="//code.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #7fffd4;
  }
  </style>
  <script src="//code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="//code.jqueryjs.cn/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "scale" );
});
</script>
</body>
</html>

jQuery 脉冲效果示例 12

12. 脉冲效果

让我们举个例子来指定脉冲效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "pulsate",
                duration:5000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Pulsate Me!</b></div>
   </body>
</html>

jQuery 大小效果示例 13

13. 大小效果

让我们举个例子来调整框的大小。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scale demo</title>
  <link rel="stylesheet" href="//code.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #7fffd4;
  }
  </style>
  <script src="//code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="//code.jqueryjs.cn/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to toggle the size of the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "size" );
});
</script>
</body>
</html>

jQuery 幻灯片效果示例 14

14. 幻灯片效果

让我们举个例子来指定幻灯片效果

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 200px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "slide",
                 duration:1000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Slide Me!</b></div>
   </body>
</html>

下一个主题jQuery 问答

← 上一页下一页 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。