效果（Effects）

优质

小牛编辑

126浏览

2023-12-01

jQuery提供了一个简单的界面，用于执行各种令人惊叹的效果。 jQuery方法允许我们以最小配置快速应用常用效果。本教程介绍了创建视觉效果的所有重要jQuery方法。

显示和隐藏元素

显示和隐藏元素的命令几乎是我们所期望的 - show()显示包装集中的元素， hide()隐藏它们。

语法 (Syntax)

这是show()方法的简单语法 -

<b>[selector].</b>show( speed, [callback] );

以下是所有参数的说明 -

speed - 表示三种预定义速度之一（“慢”，“正常”或“快速”）或运行动画的毫秒数（例如1000）的字符串。
callback - 此可选参数表示动画完成时要执行的函数; 对每个动画元素执行一次。

以下是hide()方法的简单语法 -

<b>[selector].</b>hide( speed, [callback] );

以下是所有参数的说明 -

speed - 表示三种预定义速度之一（“慢”，“正常”或“快速”）或运行动画的毫秒数（例如1000）的字符串。
callback - 此可选参数表示动画完成时要执行的函数; 对每个动画元素执行一次。

例子 (Example)

考虑以下带有小型JQuery编码的HTML文件 -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });
            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
         });
      </script>
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>
      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

切换元素

jQuery提供了在显示或隐藏之间切换元素的显示状态的方法。如果最初显示元素，它将被隐藏; 如果隐藏，它将被显示。

语法 (Syntax)

以下是其中一个toggle()方法的简单语法 -

<b>[selector].</b>.toggle([speed][, callback]);

以下是所有参数的说明 -

speed - 表示三种预定义速度之一（“慢”，“正常”或“快速”）或运行动画的毫秒数（例如1000）的字符串。
callback - 此可选参数表示动画完成时要执行的函数; 对每个动画元素执行一次。

例子 (Example)

我们可以为任何元素设置动画，例如包含图像的简单

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

JQuery效果方法

您已经看到了jQuery Effects的基本概念。下表列出了创建不同类型效果的所有重要方法 -

Sr.No.	方法和描述
1	动画（params，[duration，easing，callback]）用于制作自定义动画的功能。
2	fadeIn( speed, [callback] ) 通过调整其不透明度并在完成后触发可选回调来淡入所有匹配的元素。
3	fadeOut( speed, [callback] ) 通过将其不透明度调整为0，然后将显示设置为“无”并在完成后触发可选回调来淡出所有匹配的元素。
4	fadeTo（速度，不透明度，回调）将所有匹配元素的不透明度淡化为指定的不透明度，并在完成后触发可选回调。
5	hide（）如果显示匹配元素，则隐藏每个匹配元素。
6	hide( speed, [callback] ) 使用优雅动画隐藏所有匹配的元素，并在完成后触发可选回调。
7	节目（）如果隐藏了匹配元素，则显示每个匹配元素。
8	show( speed, [callback] ) 使用优雅动画显示所有匹配的元素，并在完成后触发可选回调。
9	slideDown( speed, [callback] ) 通过调整高度并在完成后触发可选回调来显示所有匹配的元素。
10	slideToggle（speed，[callback]）通过调整高度并在完成后触发可选回调来切换所有匹配元素的可见性。
11	slideUp( speed, [callback] ) 通过调整高度并在完成后触发可选回调来隐藏所有匹配的元素。
12	stop( [clearQueue, gotoEnd ]) 停止所有指定元素上当前运行的所有动画。
13	toggle( ) 切换显示每组匹配的元素。
14	toggle( speed, [callback] ) 使用优雅动画切换显示每组匹配元素，并在完成后触发可选回调。
15	拨动开关）根据开关切换显示每组匹配元素（true表示所有元素，false表示隐藏所有元素）。
16	jQuery.fx.off 全局禁用所有动画。

基于UI库的效果

要使用这些效果，您可以从jQuery UI Library下载最新的jQuery UI Library jquery-ui-1.11.4.custom.zip ，或者使用Google CDN以类似于jQuery的方式使用它。

我们在HTML页面中使用以下代码片段将Google CDN用于jQuery UI，因此我们可以使用jQuery UI -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

Sr.No.	方法和描述
1	Blind 将元素遮挡或通过使其隐藏来显示它。
2	Bounce 垂直或水平弹跳元素n次。
3	Clip 垂直或水平地打开或关闭元素。
4	Drop 丢弃元素或通过放入元素显示它。
5	Explode 将元素分解为多个部分。
6	Fold 将元素折叠成一张纸。
7	Highlight 使用定义的颜色突出显示背景。
8	Puff 缩放和淡出动画创建了抽吸效果。
9	Pulsate 多次脉动元素的不透明度。
10	Scale 按百分比因子缩小或增长元素。
11	Shake 垂直或水平摇动元素n次。
12	Size 将元素的大小调整为指定的宽度和高度。
13	Slide 将元素拖出视口。
14	Transfer 将元素的轮廓转移到另一个元素。