影響

2018-08-12 21:27 更新

jQuery - 影響

jQuery 提供了一個(gè)非常簡(jiǎn)單的接口來(lái)做各種類(lèi)型的神奇效果。jQuery 方法使我們能夠用最低的配置，迅速應(yīng)用常用的效果。

本教程涵蓋了所有重要的創(chuàng)建視覺(jué)效果的 jQuery 方法。

顯示和隱藏元素

顯示和隱藏元素的命令是我們所期望的 —— show() 用于在包裝好的集合中顯示元素，而 hide() 用于隱藏它們。

語(yǔ)法

這是 show() 方法的簡(jiǎn)單語(yǔ)法 ——

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

這是所有參數(shù)的描述 ——

  • speed —— 一個(gè)字符串，代表了三個(gè)預(yù)定義速度("慢"，"正常"，"快速")之一或者是運(yùn)行動(dòng)畫(huà)的毫秒數(shù)(如 1000)。

  • callback —— 可選參數(shù)，代表了當(dāng)動(dòng)畫(huà)完成后要被執(zhí)行的函數(shù)；每個(gè)動(dòng)畫(huà)元素要執(zhí)行一次。

下面是 hide() 方法的簡(jiǎn)單的語(yǔ)法 ——

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

這是所有參數(shù)的描述 ——

  • speed —— 一個(gè)字符串，代表了三個(gè)預(yù)定義速度("慢速"，"正常"，"快速")之一或者是運(yùn)行動(dòng)畫(huà)的毫秒數(shù)(如 1000)。

  • callback —— 可選參數(shù)，代表了當(dāng)動(dòng)畫(huà)完成后要被執(zhí)行的函數(shù)；每個(gè)動(dòng)畫(huà)元素執(zhí)行一次。

示例

考慮下面這個(gè)帶有一小段 JQuery 編碼的 HTML 文件 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/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>

它將產(chǎn)生如下所示結(jié)果 ——

切換元素

jQuery 提供了方法來(lái)在顯示和隱藏之間切換元素的顯示狀態(tài)。如果元素最初是顯示狀態(tài)，那么它會(huì)變?yōu)殡[藏；如果元素最初是隱藏狀態(tài)，那么它會(huì)顯示出來(lái)。

語(yǔ)法

這是 toggle() 方法的簡(jiǎn)單語(yǔ)法 ——

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

這是所有參數(shù)的描述 ——

  • speed —— 一個(gè)字符串，代表了三個(gè)預(yù)定義速度("慢速"，"正常"，"快速")之一或者是運(yùn)行動(dòng)畫(huà)所需的毫秒數(shù)(如 1000)。

  • callback —— 可選參數(shù)，代表了當(dāng)動(dòng)畫(huà)完成后要被執(zhí)行的函數(shù)；每個(gè)動(dòng)畫(huà)元素要執(zhí)行一次。

示例

我們可以使任何元素產(chǎn)生動(dòng)畫(huà)效果，如包含一個(gè)動(dòng)畫(huà)的簡(jiǎn)單的 < div> ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/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="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.jpg" alt="jQuery" />
         </div>
         <div class="log"></div>
      </div>            
   </body>

</html>

這將產(chǎn)生如下所示的結(jié)果 ——

JQuery 效果方法

你已經(jīng)了解了 JQuery 效果的基本概念。下表是用于創(chuàng)建不同種類(lèi)效果的全部重要的方法 ——

序號(hào) 方法 & 描述
1 animate( params, [duration, easing, callback] )

用于制作自定義動(dòng)畫(huà)的函數(shù)。
2 fadeIn( speed, [callback] )

通過(guò)調(diào)整所有匹配元素的不透明度來(lái)使它們消失，并在這一操作完成后激發(fā)一個(gè)可選的回調(diào)。
3 fadeOut( speed, [callback] )

通過(guò)將所有匹配元素的不透明度調(diào)整為 0 使它們消失，然后設(shè)置顯示為 "none"，并在這一操作完成后激發(fā)一個(gè)可選的回調(diào)。
4 fadeTo( speed, opacity, callback )

將所有匹配元素的不透明度調(diào)整為一個(gè)指定的不透明度并在這一操作完成后激發(fā)一個(gè)可選的回調(diào)。
5 hide( )

如果匹配元素集合時(shí)顯示狀態(tài)，那就隱藏它們。
6 hide( speed, [callback] )

用優(yōu)美的動(dòng)畫(huà)來(lái)隱藏所有匹配元素并在這一操作完成后激發(fā)一個(gè)可選的回調(diào)。
7 show( )

如果匹配元素集合是隱藏狀態(tài)，那就顯示它們。
8 show( speed, [callback] )

用一個(gè)優(yōu)美的動(dòng)畫(huà)顯示所有的匹配元素并在這一操作完成后激發(fā)一個(gè)可選的回調(diào)。
10 slideDown( speed, [callback] )

通過(guò)調(diào)整所有匹配元素的高來(lái)顯示它們并在這一操作完成后激發(fā)一個(gè)可選的回調(diào)。
11 slideToggle( speed, [callback] )

通過(guò)調(diào)整所有匹配元素的高來(lái)切換它們的可視狀態(tài)并在這一操作完成后激發(fā)一個(gè)可選的回調(diào)。
12 slideUp( speed, [callback] )

通過(guò)調(diào)整所有匹配元素的高來(lái)隱藏它們并在這一操作完成后激發(fā)一個(gè)可選的回調(diào)。
13 stop( [clearQueue, gotoEnd ])

在指定的元素中停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)。
14 toggle( )

切換每個(gè)匹配元素集合的顯示狀態(tài)。
15 toggle( speed, [callback] )

使用一個(gè)優(yōu)雅的動(dòng)畫(huà)來(lái)切換匹配元素集合的顯示狀態(tài)并在這一操作完成后激發(fā)一個(gè)可選的回調(diào)。
16 toggle( switch )

基于以上選項(xiàng)來(lái)切換匹配元素的顯示狀態(tài)(true 顯示全部元素，false 隱藏全部元素)。
17 jQuery.fx.off

在全局范圍內(nèi)禁用所有動(dòng)畫(huà)。

基于效果的 UI 庫(kù)

想要使用這些效果，你可以從 jQuery UI Library 下載最新版本的 jQuery UI 庫(kù) jquery-ui-1.11.4.custom.zip 或者使用 Google CDN，其方法和 jQuery 相同。

我們已經(jīng)在 HTML 頁(yè)面的下述代碼片段中為 jQuery UI 使用了 Google CDN，所以我們可以使用 jQuery UI ——

<head>
   <script src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery-ui.min.js"></script>
</head>
序號(hào) 方法 & 描述
1 Blind

以百葉窗的效果將元素隱藏或使元素顯現(xiàn)。
2 Bounce

使元素垂直或水平的彈跳 n 次。
3 Clip

剪輯元素打開(kāi)或關(guān)閉，垂直或水平。
4 Drop

以下降的方式使元素隱藏或者顯現(xiàn)出來(lái)。
5 Explode

將元素分解成多個(gè)部分。
6 Fold

將元素像一張紙一樣折疊起來(lái)。
7 Highlight

用于定義的顏色將背景標(biāo)亮。
8 Puff

縮放并淡出動(dòng)畫(huà)來(lái)創(chuàng)造蓬松的效果。
9 Pulsate

多次有規(guī)律的改變?cè)氐牟煌该鞫取?/p>

10 Scale

用一個(gè)比例因子來(lái)減少或增加元素。
11 Shake

使元素 n 次垂直或水平搖晃。
12 Size

給元素重新設(shè)定一個(gè)指定的寬和高。
13 Slide

使元素滑落出視窗。
14 Transfer

將元素的輪廓轉(zhuǎn)換為另一個(gè)。
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)