Excel 加入浮水印教學，標示草稿、測試、樣本等字樣

阿新 • • 發佈：2021-06-16

基本顯示

一、顯示show()

show() 方法顯示隱藏的被選元素。

注意：show() 適用於通過 jQuery 方法和 CSS 中 display:none 隱藏的元素（不適用於通過 visibility:hidden 隱藏的元素）。

語法

$(selector).show(speed,easing,callback)

二、隱藏hide()

hide() 方法隱藏被選元素。

提示：這與 CSS 屬性 display:none 類似。

註釋：隱藏的元素不會被完全顯示（不再影響頁面的佈局）。

語法

$(selector).hide(speed,easing,callback)

三、切換toggle()

toggle() 方法在被選元素上進行 hide() 和 show() 之間的切換。

該方法檢查被選元素的可見狀態。如果一個元素是隱藏的，則執行 show()，如果一個元素是可見的，則執行 hide() - 這會造成一種切換的效果。

註釋：隱藏的元素不會被完全顯示（不再影響頁面的佈局）。

提示：該方法可被用於自定義函式之間的切換。

$(selector).toggle(speed,easing,callback)

三個效果都有同樣的引數，描述如下：

引數	描述
speed	可選。規定隱藏/顯示效果的速度。可能的值：毫秒 "slow" "fast"
easing	可選。規定在動畫的不同點上元素的速度。預設值為 "swing"。可能的值： "swing" - 在開頭/結尾移動慢，在中間移動快 "linear" - 勻速移動提示：擴充套件外掛中提供更多可用的 easing 函式。
callback	可選。方法執行完之後，要執行的函式。如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。

演示程式碼：

<body>
    <button>顯示</button>
    <button>隱藏</button>
    <button>切換</button>
    <div></div>
    <script>
        $('button').eq(0).click(function() {
            $('div').show(1000,'linear',alert('hello world!'));
        });
        $('button').eq(1).click(function() {
            $('div').hide(1000,'linear',console.log('hello'));
        });
        $('button').eq(2).click(function() {
            $('div').toggle(1000,'linear',alert('hello world!'));
        });
    </script>
</body>

滑動顯示

一、滑動顯示slideDown()

slideDown() 方法以滑動方式顯示被選元素。

注意：slideDown() 適用於通過 jQuery 方法隱藏的元素，或在 CSS 中宣告 display:none 隱藏的元素（不適用於通過 visibility:hidden 隱藏的元素）。

語法

$(selector).slideDown(speed,easing,callback)

二、滑動隱藏slideUp()

slideUp() 方法以滑動方式隱藏被選元素。

注意：隱藏的元素不會被完全顯示（不再影響頁面的佈局）。

語法

$(selector).slideUp(speed,easing,callback)

三、切換slideToggle()

slideToggle() 方法在被選元素上進行 slideUp() 和 slideDown() 之間的切換。

該方法檢查被選元素的可見狀態。如果一個元素是隱藏的，則執行 slideDown()，如果一個元素是可見的，則執行 slideUp() - 這會造成一種切換的效果。

語法

$(selector).slideToggle(speed,easing,callback)

這三個方法和基本顯示的三個方法的引數及效果一模一樣

<body>
    <button>顯示</button>
    <button>隱藏</button>
    <button>切換</button>
    <div></div>
    <script>
        $('button').eq(0).click(function() {
            $('div').slideDown();
        });
        $('button').eq(1).click(function() {
            $('div').slideUp();
        });
        $('button').eq(2).click(function() {
            $('div').slideToggle();
        });
    </script>
</body>

hover的複合寫法

一、兩個引數

第一個引數為滑鼠經過時的方法，第二個引數為滑鼠離開時的方法。

<script>
        $(function() {
            $('.nav-items>a').hover(function(){
                $(this).next().slideDown();
            }, function(){
                $(this).next().slideUp();
            })
        });
</script>

二、一個引數

該引數為滑鼠經過和離開時執行的同一個方法。

<script>
        $(function() {
            $('.nav-items>a').hover(function(){
                $(this).next().slideToggle();
            });
        });
</script>

動畫佇列

動畫及佇列效果

動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行

停止排隊

語法

stop()

（1）stop()方法用於停止動畫或效果

（2）注意：stop()寫到動畫或者效果的前面，用於停止結束上一次的動畫3

淡入淡出顯示

一、淡入顯示fadeIn

fadeIn() 方法逐漸改變被選元素的不透明度，從隱藏到可見（褪色效果）。

註釋：隱藏的元素不會被完全顯示（不再影響頁面的佈局）。

提示：該方法通常與 fadeOut() 方法一起使用。

語法：

$(selector).fadeIn(speed,easing,callback)

二、淡出顯示fadeOut()

fadeOut() 方法逐漸改變被選元素的不透明度，從可見到隱藏（褪色效果）。

註釋：隱藏的元素不會被完全顯示（不再影響頁面的佈局）。

提示：該方法通常與 fadeIn() 方法一起使用。

語法

$(selector).fadeOut(speed,easing,callback)

三、淡入淡出切換fadeToggle()

fadeTo() 方法逐漸改變被選元素的不透明度為指定的值（褪色效果）。

語法

 $(selector).fadeTo(speed,opacity,easing,callback)

變數	描述
opacity	必需。規定要淡入或淡出的透明度。必須是介於 0.00 與 1.00 之間的數字。

四、透明度至fadeTo()

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。

如果元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。

如果元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。

註釋：隱藏的元素不會被完全顯示（不再影響頁面的佈局）。

語法

$(selector).fadeToggle(speed,easing,callback)

自定義動畫animate

animate() 方法執行 CSS 屬性集的自定義動畫。

該方法通過 CSS 樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以建立動畫效果。

只有數字值可建立動畫（比如 "margin:30px"）。字串值無法建立動畫（比如 "background-color:red"）。

語法

(selector).animate({styles},speed,easing,callback)

引數	描述
styles	必需。規定產生動畫效果的一個或多個 CSS 屬性/值。注意：當與 animate() 方法一起使用時，該屬性名稱必須是駝峰寫法：您必須使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此類推。可以應用動畫的屬性： backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 提示：顏色動畫不包含在核心 jQuery 庫中。如果您想要應用動畫顏色，您需要從 jQuery.com 下載顏色動畫外掛。

引數

描述

styles

必需。規定產生動畫效果的一個或多個 CSS 屬性/值。注意： 當與 animate() 方法一起使用時，該屬性名稱必須是駝峰寫法：您必須使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此類推。可以應用動畫的屬性： backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 提示：顏色動畫不包含在核心 jQuery 庫中。如果您想要應用動畫顏色，您需要從 jQuery.com 下載顏色動畫外掛。

注意，引數必須以物件傳遞

例如以下程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
    <style>
        div {
            position: absolute;
            height: 200px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>按鈕</button>
    <div></div>
    <script>
        $('button').click(function() {
            $('div').animate({
                top: 400,
                left: 400,
                height: 400,
                width: 400
            });
        });
    </script>
</body>
</html>