Effects-Basics

Posted on Edited on In Views: Disqus:

 

一、.hide()

隱藏元素。

有四種多載方法。

.hide()

.hide( [duration ] [, Function complete ] )

.hide( PlainObject options )

.hide( duration [, easing ] [, Function complete ] )

 

其特性大部份與.show()方法相似，請參考.show()方法。

 

二、.show()

顯示元素。

有四種多載方法。

1、.show()

相當於.css( "display", "block") or .css( "display", "inline")，

視原本的display屬性而定，block就是block，inline就是inline。

 

2、.show( [duration ] [, Function complete ] )

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

 

3、.show( PlainObject options )

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

 

4、.show( duration [, easing ] [, Function complete ] )

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

 

三、.toggle()

顯示或隱藏元素。

有四種多載方法。

1、.toggle( Boolean display )

可用來強制指定每次toggle時固定為顯示或隱藏。

2、.toggle( [duration ] [, Function complete ] )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta name="viewport" content="width=device-width">
</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>
        $("#clickme").click(function () {
            $("#book").toggle("slow", function () {

            });
        });
    </script>
</body>
</html>

另外這是沒有延時效果的範例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta name="viewport" content="width=device-width">
</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>
        $("#clickme").click(function () {
            $("#book").toggle();
        });
    </script>
</body>
</html>

 

3、.toggle( PlainObject options )

相關屬性請參考.show()方法。

4、.toggle( duration [, easing ] [, Function complete ] )

相關屬性請參考.show()方法。