Effects-Fading

Posted on Edited on In Views: Disqus:

 

一、.fadeIn()

將一元素從隱藏狀態逐漸顯示出來。

有三種多載方法。

1、.fadeIn( [duration ] [, Function complete ] )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
    <div id="clickme">
        Click here
    </div>
    <img id="book" style="display:none;" src="http://www.cwb.gov.tw/V7/images/icon/cwbLogo04.png" alt="" width="100" height="123">

    <script>
        // With the element initially hidden, we can show it slowly:
        $("#clickme").click(function () {
            $("#book").fadeIn("slow", function () {
                // Animation complete
            });
        });
    </script>
</body>
</html>

duration參數可以是"fast"、"slow"、200~600毫秒之間，預設值為400毫秒。

 

2、.fadeIn( PlainObject options )

options裡可用的屬性有duration、easing、queue、specialEasing、step、progress、complete、start、done、fail、always。

 

3、.fadeIn( [duration ] [, easing ] [, Function complete ] )

移動曲線easing參數預設值為swing，也可以選linear。

 

二、.fadeOut()

將一元素從顯示狀態逐漸隱藏。

有三種多載方法。

1、.fadeOut( [duration ] [, Function complete ] )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
    <div id="clickme">
        Click here
    </div>
    <img id="book" src="http://www.cwb.gov.tw/V7/images/icon/cwbLogo04.png" alt="" width="100" height="123">

    <script>
        // With the element initially hidden, we can show it slowly:
        $("#clickme").click(function () {
            $("#book").fadeOut("slow", function () {
                // Animation complete
            });
        });
    </script>
</body>
</html>

 

2、.fadeOut( PlainObject options )

3、.fadeOut( [duration ] [, easing ] [, Function complete ] )

 

其相關特性與.fadeIn()方法無異，請參考.fadeIn()方法。

 

三、.fadeTo()

將一元素從顯示狀態逐漸變到指定的透明度。

有兩種多載方法。

.fadeTo( duration, Number opacity [, Function complete ] )

.fadeTo( duration, Number opacity [, easing ] [, Function complete ] )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
    <div id="clickme">
        Click here
    </div>
    <img id="book" src="http://www.cwb.gov.tw/V7/images/icon/cwbLogo04.png" alt="" width="100" height="123">

    <script>
        // With the element initially hidden, we can show it slowly:
        $("#clickme").click(function () {
            $("#book").fadeTo("slow", 0.5, function () {
                // Animation complete.
            });
        });
    </script>
</body>
</html>

opacity的數值為0(透明)~1(不透明)

其相關特性與.fadeIn()方法無異，請參考.fadeIn()方法。

 

四、.fadeToggle()

將一元素從顯示狀態逐漸隱藏或是從隱藏狀態逐漸顯示。

有兩種多載方法。

.fadeToggle( [duration ] [, String easing ] [, Function complete ] )

.fadeToggle( PlainObject options )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
    <div id="clickme">
        Click here
    </div>
    <img id="book" src="http://www.cwb.gov.tw/V7/images/icon/cwbLogo04.png" alt="" width="100" height="123">

    <script>
        // With the element initially hidden, we can show it slowly:
        $("#clickme").click(function () {
            $("#book").fadeToggle("slow", function () {
                // Animation complete.
            });
        });
    </script>
</body>
</html>

其相關特性與.fadeIn()方法無異，請參考.fadeIn()方法。