Skip to content

Latest commit

 

History

History
328 lines (268 loc) · 8.69 KB

effects.md

File metadata and controls

328 lines (268 loc) · 8.69 KB
Raw

jQuery - 影响

jQuery 提供了一个非常简单的接口来做各种类型的神奇效果。jQuery 方法使我们能够用最低的配置，迅速应用常用的效果。

本教程涵盖了所有重要的创建视觉效果的 jQuery 方法。

显示和隐藏元素

显示和隐藏元素的命令是我们所期望的 —— show() 用于在包装好的集合中显示元素，而 hide() 用于隐藏它们。

语法

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

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

这是所有参数的描述 ——

  • speed —— 一个字符串，代表了三个预定义速度("慢"，"正常"，"快速")之一或者是运行动画的毫秒数(如 1000)。

  • callback —— 可选参数，代表了当动画完成后要被执行的函数；每个动画元素要执行一次。

下面是 ** hide()** 方法的简单的语法 ——

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

这是所有参数的描述 ——

  • speed —— 一个字符串，代表了三个预定义速度("慢速"，"正常"，"快速")之一或者是运行动画的毫秒数(如 1000)。

  • callback —— 可选参数，代表了当动画完成后要被执行的函数；每个动画元素执行一次。

示例

考虑下面这个带有一小段 JQuery 编码的 HTML 文件 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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 —— 一个字符串，代表了三个预定义速度("慢速"，"正常"，"快速")之一或者是运行动画所需的毫秒数(如 1000)。

  • callback —— 可选参数，代表了当动画完成后要被执行的函数；每个动画元素要执行一次。

示例

我们可以使任何元素产生动画效果，如包含一个动画的简单的 < div> ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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 效果的基本概念。下表是用于创建不同种类效果的全部重要的方法 ——

序号 方法 & 描述
1 animate( params, [duration, easing, callback] )

用于制作自定义动画的函数。
2 fadeIn( speed, [callback] )

通过调整所有匹配元素的不透明度来使它们消失，并在这一操作完成后激发一个可选的回调。
3 fadeOut( speed, [callback] )

通过将所有匹配元素的不透明度调整为 0 使它们消失，然后设置显示为 "none"，并在这一操作完成后激发一个可选的回调。
4 fadeTo( speed, opacity, callback )

将所有匹配元素的不透明度调整为一个指定的不透明度并在这一操作完成后激发一个可选的回调。
5 hide( )

如果匹配元素集合时显示状态，那就隐藏它们。
6 hide( speed, [callback] )

用优美的动画来隐藏所有匹配元素并在这一操作完成后激发一个可选的回调。
7 show( )

如果匹配元素集合是隐藏状态，那就显示它们。
8 show( speed, [callback] )

用一个优美的动画显示所有的匹配元素并在这一操作完成后激发一个可选的回调。
10 slideDown( speed, [callback] )

通过调整所有匹配元素的高来显示它们并在这一操作完成后激发一个可选的回调。
11 slideToggle( speed, [callback] )

通过调整所有匹配元素的高来切换它们的可视状态并在这一操作完成后激发一个可选的回调。
12 slideUp( speed, [callback] )

通过调整所有匹配元素的高来隐藏它们并在这一操作完成后激发一个可选的回调。
13 stop( [clearQueue, gotoEnd ])

在指定的元素中停止当前正在运行的动画。
14 toggle( )

切换每个匹配元素集合的显示状态。
15 toggle( speed, [callback] )

使用一个优雅的动画来切换匹配元素集合的显示状态并在这一操作完成后激发一个可选的回调。
16 toggle( switch )

基于以上选项来切换匹配元素的显示状态(true 显示全部元素，false 隐藏全部元素)。
17 jQuery.fx.off

在全局范围内禁用所有动画。

基于效果的 UI 库

想要使用这些效果，你可以从 jQuery UI Library 下载最新版本的 jQuery UI 库 jquery-ui-1.11.4.custom.zip 或者使用 Google CDN，其方法和 jQuery 相同。

我们已经在 HTML 页面的下述代码片段中为 jQuery UI 使用了 Google CDN，所以我们可以使用 jQuery UI ——

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
序号 方法 & 描述
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

将元素的轮廓转换为另一个。