jQuery學習筆記——jQuery中toggle與slideToggle以及fadeToggle的比較

阿新 • • 發佈：2019-01-13

jQuery中toggle與slideToggle以及fadeToggle的比較

操作元素的顯示和隱藏可以有幾種方法。
例如：

改變樣式display為none
設定位置高度為0
設定透明度為0

都能達到這個目的，並且針對這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法

toggle、sildeToggle以及fadeToggle的區別：

toggle：切換顯示與隱藏效果
sildeToggle：切換上下拉卷滾效果
fadeToggle：切換淡入淡出效果

當然細節上還是有更多的不同點:
toggle與slideToggle細節區別：

toggle：動態效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性
slideToggle：動態效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性

fadeToggle方法

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。
元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。
元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。
註釋：隱藏的元素不會被完全顯示（不再影響頁面的佈局）

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        p{
            color:red;
        }
    </style>
    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.js" 
></script>
</head>

<body>
    <h2>toggle與slideToggle以及fadeToggle的比較</h2>
    <p>測試文字淡入效果</p>
    動畫切換：
    <select id="animation">
        <option value="1">toggle</option>
        <option value="2">slideToggle</option>
        <option value="3">fadeToggle</option>
    </select>
    <input id="btnShow" type="button" value="點選切換" />
    <script type="text/javascript">

    $("#btnShow").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").toggle();
        } else if (v == "2") {
            $("p").slideToggle("slow");
        } else if (v == "3") {
            $("p").fadeToggle(1000, "linear");
        }
    });
    </script>
</body>

</html>

jQuery學習筆記——jQuery中toggle與slideToggle以及fadeToggle的比較

jQuery中toggle與slideToggle以及fadeToggle的比較操作元素的顯示和隱藏可以有幾種方法。例如：改變樣式display為none 設定位置高度為0 設定透明度為0 都能達到這個目的，並且針對這樣的處理jQuery都提供

jQuery學習筆記——jQuery選擇器練習

<!DOCTYPE html> <html> <head> <meta char

jQuery學習筆記——jQuery判斷元素是否存在於陣列，trim()去除字串兩端空白字元

jQuery中查詢陣列中的索引inArray 在PHP有in_array()判斷某個元素是否存在陣列中，JavaScript卻沒有，但是jQuery封裝了inArray()函式判斷元素是否存在陣列中。注意了：在ECMAScript5已經有資料的indexOf方

jquery學習筆記-jquery實現無重新整理聯動

以前做聯動使用asp.net ajax控制元件做的，使用了webservice感覺挺麻煩。發現jquery很方便。首先在頁面引入jquery.js。文字描述太麻煩了。。直接貼關鍵程式碼吧。 <script language="javascript"> $(

【jQuery學習筆記-----jQuery事件名稱空間】

jQuery事件名稱空間 jQuery支援事件名稱空間，以方便事件管理。例如，在下面的示例中，為div元素繫結多個事件型別，然後使用名稱空間進行規範，從而方便管理。所謂事件名稱空間，就晨事件型別後面以點語法附加一個別名，以便引用事件，如”click.a”，其中”a”就是cl

webservice學習筆記(十二):js與jquery利用ajax獲取webservice返回值

1.webservice服務端程式碼如圖(ps:只是一個簡單的sayHello的demo): -服務端是基於spring的,具體beans.xml配置如下: <?xml version="1.0" encoding="UTF-8"?> <bea

jquery學習筆記之事件繫結on與事件解綁off用法

on()的多事件繫結之前學的滑鼠事件，表單事件與鍵盤事件都有個特點，就是直接給元素繫結一個處理函式，所有這類事件都是屬於快捷處理。翻開原始碼其實可以看到，所有的快捷事件在底層的處理都是通過一個”on”方法來實現的。jQuery on()方法是官方推

鋒利的JQuery學習筆記之JQuery

function 效率 back 一點 ie6 容易服務器端 pre loading 　　今天終於看到了最令我興奮的一章：JQuery與Ajax的應用。AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，

JQuery 學習筆記--01

隱藏 mat 不包含 rst 基本選擇器多重 title back first 1. JQuery 基本選擇器 express description remarks $("#idName") id選擇器 $(".className") 類選擇器 $

jquery學習筆記（六）插件的編寫

function jquery 命名方式一、對jQuery對象的擴展;(function($){ $.fn.extend( { fun1:abc,fun2:1bc … } )})(jQuery)二、對jQuery本身的擴展，相當於靜態方法;(function($){ $

jQuery學習筆記（三）

對象 idt 命名空間 goto div hid 右鍵 func 切換 jQuery中的事件和動畫 jquery中的事件加載DOM 兩者等價但有細微區別 $(document).ready(function(){//編寫代碼}) 在DOM完全就緒時就可以被調用。

jQuery學習筆記（五）

加載 complete += ron 序列 border () ajaxstart 單選 jQuery與Ajax的應用 Ajax的優勢和不足 Ajax的優勢 a）不需要插件支持 b）優秀的用戶體驗 c）提高Web程序的性能 d）減輕服務器和寬帶的負擔 Ajax的不

鋒利的jQuery學習筆記之jQuery選擇器

空格 attr 簡單 cap 字符串 check disable select file 在介紹jQuery選擇器之前，先簡單介紹一下CSS選擇器---> 一、CSS選擇器常見的CSS選擇器有以下幾種：選擇器語法描述示例標簽選擇器 E{CSS規則

jQuery學習筆記

時機學習 jquery基礎 element 彈框 eight bce 重點 inner 一、jQuery的常用方法使用示例 1 // 頁面加載之後執行 2 $(function(){ 3 // 事件的綁定方式1 4 $("#bt3").bind(

javascript學習筆記-jquery學習廣告彈出功能

javascript學習筆記-jquer項目功能:頁面加載完成後開始彈出廣告<!DOCTYPE html><html><head><meta charset="UTF-8"><title>首頁彈出廣告</title>&

jQuery學習筆記(一)

his this set 等待例如 agg lin 不能時機　　jQuery的強大功能無需多言，其中學習的內容自然也是較多，查詢API是必經之路的，總結復習也是必不可少的，此筆記多數案例也是來自API文檔。導入js文件　　使用任意js框架，導入相關js文件

Web | jQuery學習筆記

asc 共存 led lds not str pro 傳遞 ttr jQuery 是一個 JavaScript 函數庫，將 JS 的一些功能實現封裝成了函數，極大地簡化了 JavaScript 編程。 jQuery是 John Resig 於2006年創建的一個開源項目，j

jQuery 學習筆記（3）（內容選擇器、attr方法、prop方法，類的操作）

節點 lec ddc 方法 pty 全部如果一個所有內容選擇器： 1、$("div:empty"): 空的div元素 2、$("div:parent"): 非空div元素 3、$("div:contains(text)"): 包含 text 文本（指定文本）的div

jquery學習筆記分享

color jquery tro src 成才完成不同的 strong 聯系入口函數 1.js的入口函數要比jquery的入口函數執行的晚一些 2.jq的入口函數會等待頁面的加載完才執行,但是不會等待圖片的加載 3.js的入口函數會等待頁面的加載完成,並且等待圖片的加

jQuery學習筆記：基礎

本文主要總結jQuery中一些知識點概念美元符號$是著名的jQuery符號。jQuery把所有功能全部封裝在一個全域性變數jQuery中，而$也是一個合法的變數名，它是變數jQuery的別名 $本質上就是一個函式，但是函式也是物件，於是$除了可以直接呼叫外，也可以有很多其他屬性選擇器層級選擇

jQuery學習筆記——jQuery中toggle與slideToggle以及fadeToggle的比較

jQuery中toggle與slideToggle以及fadeToggle的比較

相關推薦