jQuery - 概述

jQuery - 效果

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

显示和隐藏元素

显示和隐藏元素的命令几乎是什么我们期望和减去; show()显示包装集中的元素，隐藏()隐藏它们.

语法

以下是 show()方法的简单语法 :

[selector].show( speed, [callback] );

以下是所有参数的说明 :

速度 : 表示三种预定义速度之一("慢"，"正常"或"快速")或运行动画的毫秒数(例如1000)的字符串.
回拨 : 此可选参数表示动画完成时要执行的函数;对每个动画元素执行一次.

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

[selector].hide( speed, [callback] );

以下是所有参数的说明 :

速度 : 表示三种预定义速度之一("慢"，"正常"或"快速")或运行动画的毫秒数(例如1000)的字符串.
回拨 : 此可选参数表示动画完成时要执行的函数;对每个动画元素执行一次.

示例

考虑以下HTML文件小JQuery编码 :

在线演示

<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提供了在显示或隐藏之间切换元素的显示状态的方法. 如果元素最初显示，它将被隐藏; 如果隐藏，它将被显示.

语法

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

[selector]..toggle([speed][, callback]);

以下是所有参数的说明 −

speed :表示三种预定速度 ("slow", "normal", or "fast")之一或运行动画的毫秒数(例如1000)的字符串.
callback : 此可选参数表示动画完成时要执行的函数; 对每个动画元素执行一次.

示例

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

在线演示

<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	animate( params, [duration, easing, callback] ) 制作自定义动画的功能.
2	fadeIn(speed，[callback]) 通过调整不透明度并在完成后触发可选回调来淡入所有匹配的元素.
3	fadeOut( speed, [callback] ) 通过将不透明度调整为0淡出所有匹配的元素，然后将显示设置为"无"并在完成后触发可选回调.
4	fadeTo( speed, opacity, callback ) 淡化不透明度所有匹配的元素到指定的不透明度并在完成后触发可选的回调.
5	hide() 隐藏每一个匹配元素的集合(如果显示).
6	hide( speed, [callback] ) 隐藏所有匹配项元素使用优雅动画并在完成后触发可选回调.
7	show() 显示每组如果它们被隐藏，则匹配元素.
8	show(speed，[callback]) 使用显示所有匹配的元素优雅的动画和射击完成后的可选回调.
9	slideDown(speed，[callback]) 通过调整高度来显示所有匹配的元素并在完成后触发可选的回调.
10	slideToggle(speed，[callback]) 切换所有匹配项的可见性元素通过调整它们的高度并在完成后触发可选的回调.
11	slideUp(speed，[callback]) 隐藏所有匹配的元素，通过调整它们的高度并在完成后触发可选的回调.
12	st op([clearQueue，gotoEnd]) 停止所有指定元素上当前正在运行的动画.
13	toggle( ) 切换显示每组匹配的元素.
14	toggle( speed, [callback] ) 使用优雅动画切换显示每组匹配元素，并在完成后触发可选回调.
15	toggle( switch ) 根据切换切换显示每组匹配元素(true显示所有元素，false隐藏所有元素).
16	jQuery.fx.off 全局禁用所有动画.

基于UI库的效果

要使用这些效果，您可以下载最新的jQuery UI库 jquery-ui-1.11.4.custom.zip来自 jQuery UI Library或使用Google CDN来使用它以与我们为jQuery所做的相似的方式.

我们在HTML页面中使用以下代码片段使用Google CDN for 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 转帐元素的轮廓到另一个.