jQuery - Effects - 極客書

jQuery提供了一個非常簡單的接口來實現各種令人驚奇的效果。jQuery方法允許我們以最少的配置快速應用常用的效果。本教程涵蓋了創建視覺效果的所有重要jQuery方法。

Showing and Hiding Elements

顯示和隱藏元素的命令與我們期望的基本相同−show（）以包裝集的形式顯示元素，而hide（）以隱藏元素。

Syntax

下面是show（）方法的簡單語法−

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

這是所有參數的描述;

speed−表示三種預定義速度（「慢速」、「正常」或「快速」）之一的字符串，或運行動畫的毫秒數（例如1000）。
callback−此可選參數表示動畫完成時要執行的函數;對每個動畫元素執行一次。

下面是hide（）方法的簡單語法−

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

這是所有參數的描述;

speed−表示三種預定義速度（「慢速」、「正常」或「快速」）之一的字符串，或運行動畫的毫秒數（例如1000）。
callback−此可選參數表示動畫完成時要執行的函數;對每個動畫元素執行一次。

Example

考慮下面的HTML文件，其中包含一個小JQuery編碼−

Live Demo

<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>

這將產生以下結果&負;

Toggling the Elements

jQuery提供了在顯示或隱藏元素之間切換元素顯示狀態的方法。如果元素最初顯示，它將被隱藏;如果隱藏，它將被顯示。

Syntax

下面是其中一個toggle（）方法的簡單語法−

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

這是所有參數的描述;

speed−表示三種預定義速度（「慢速」、「正常」或「快速」）之一的字符串，或運行動畫的毫秒數（例如1000）。
callback−此可選參數表示動畫完成時要執行的函數;對每個動畫元素執行一次。

Example

我們可以設置任何元素的動畫，例如包含圖像的簡單<div>

Live Demo

<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 Effect Methods

您已經了解了jQuery效果的基本概念。下表列出了創建不同效果的所有重要方法;

Sr.No.	Methods & Description
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	stop( [clearQueue, gotoEnd ]) 停止所有指定元素上當前運行的所有動畫。
13	toggle( ) 切換顯示每個匹配元素集。
14	toggle( speed, [callback] ) 使用優美的動畫切換顯示每個匹配元素集，並在完成後觸發可選回調。
15	toggle( switch ) 根據開關切換顯示每個匹配元素集（true顯示所有元素，false隱藏所有元素）。
16	jQuery.fx.off 全局禁用所有動畫。

UI Library Based Effects

要使用這些效果，您可以從jQuery UI Library下載最新的jQuery UI LibraryjQuery-UI-1.11.4.custom.zip，也可以使用Google CDN以與jQuery類似的方式使用它。

我們在HTML頁面中使用了Google CDN作爲jQuery UI的代碼片段，因此可以使用jqueryui−

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

Sr.No.	Methods & Description
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 將元素的輪廓轉移到另一個元素。極客書 © 2015-2020 . 京ICP備15058027號-1