个性化阅读
专注于IT技术分析
        找回密码
当前位置：srcmini > jQuery UI > 正文

jQuery UI效果

2020-03-09 08:08:59 分类：jQuery UI 阅读(877) 评论(0)

本文概述

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

句法：

.effect( effect [, options ] [, duration ] [, complete ] )

effect()方法的参数：

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

最常用的jQuery UI效果：

添加表格：

影响 描述
Blind 以百叶窗的方式显示或隐藏元素：根据指定的方向和模式, 通过上下移动底部边缘, 或将右侧边缘向右或向左移动。
Bounce 使元素看起来在垂直或水平方向上反弹, 有选择地显示或隐藏元素。
Clip 通过将元素的相对边界移动到一起, 直到它们在中间相遇, 反之亦然, 从而显示或隐藏元素。
Explode 通过将元素拆分为多个部分来显示或隐藏, 这些部分沿径向方向移动, 就像嵌入页面或从页面爆炸一样。
Drop 通过使其看起来像放在页面上或从页面上掉下来, 显示或隐藏该元素。
Fade 通过调整元素的不透明度来显示或隐藏元素。这与核心淡入淡出效果相同, 但没有选项。
Fold 通过向内或向外调整相反的边界, 然后对另一组边界进行相同操作, 来显示或隐藏元素。
Highlight 通过在显示或隐藏元素时暂时更改其背景颜色来引起对元素的注意。
Puff 调整元素的不透明度时, 在适当位置扩展或收缩元素。
Shake 垂直或水平前后摇动元素。
Scale 按指定的百分比扩展或收缩元素。
Pulsate 在确保按指定方式显示或隐藏元素之前, 先打开或关闭元素的不透明度。
Size 将元素调整为指定的宽度和高度。与比例类似, 只是指定目标尺寸的方式不同。
Slide 移动元素, 使其看起来可以滑入或滑出页面。
Transfer 对瞬态轮廓元素进行动画处理, 使该元素看起来似乎可以转移到另一个元素。必须通过ui-effects-transfer类或指定为选项的类的css规则定义outline元素的外观。

jQuery Shake效果示例1

1.震动效果：

让我们以一个示例来指定抖动效果。

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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 Blind Effect示例4

4.盲效应：

让我们以一个例子来指定盲目的效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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 Clip Effect示例5

5.剪辑效果：

让我们以一个示例来指定剪辑效果：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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 Drop Effect示例6

6.掉落效果：

让我们以一个示例来指定放置效果：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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 Fade效果示例7

7.淡入淡出效果：

让我们以一个示例来指定淡入淡出效果：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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 Highlight效果示例9

9.突出显示效果：

让我们以一个示例来指定突出显示效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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 Scale效果示例11

11.缩放效果：

让我们以一个示例来指定缩放效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scale demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #7fffd4;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/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 Pulsate Effect示例12

12.脉动效应：

让我们以一个示例来指定脉动效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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 Size Effect示例13

13.尺寸效果：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scale demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #7fffd4;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/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 Slide Effect示例14

14.幻灯片效果：

让我们以一个示例来指定幻灯片效果：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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>

立即测试

赞(0)
未经允许不得转载：srcmini » jQuery UI效果
标签：

相关推荐

评论 抢沙发

评论前必须登录！

 

猜你喜欢

热门标签

网站开发 (2587)WordPress开发 (2055)WordPress主题 (1517)Web开发 (692)主题 (528)数据科学 (444)合集 (336)资源合集 (333)教程合集 (317)函数 (287)页面 (267)python开发 (261)百度盘 (246)项目示例 (243)WordPress自定义页面 (233)图像 (219)错误 (213)视频 (195)网站 (190)网红 (189)UX设计 (187)Web安全 (179)模板 (178)Web运维 (177)应用程序 (177)WordPress插件 (176)插件 (171)前端开发 (166)美女 (164)主播 (164)