jQuery is()方法的用法

之前在“jQuery stop()方法的使用”這一節中，我們接觸了 jQuery 動畫中最常見的一個 bug，也和大家詳細探討了這個 bug 產生的根本原因以及解決方法。實際上，除了 stop() 方法，我們還可以使用 is() 方法來解決這個 bug。

在 jQuery 中，我們可以使用 is() 方法來判斷元素是否正處於動畫狀態。如果元素不處於動畫狀態，則新增新的動畫；如果元素正處於動畫狀態，則不新增新的動畫。

語法：

if(!$().is(":animated"))
{
//如果元素不處於動畫狀態，則新增新的動畫
}

:animated 是一個偽類選擇器，表示選取所有正在執行動畫的元素，我們在“其他偽類選擇器”這一節中已經介紹過了。

舉例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        figure
        {
            position:relative;   /*設定相對定位屬性，以便定位子元素*/
            width:240px;
            height:200px;
            overflow: hidden;
        }
        img
        {
            width:240px;
            height:200px;
        }
        figcaption
        {
            position:absolute;
            left:0;
            bottom:-30px;
            width:100%;
            height:30px;
            line-height:30px;
            text-align:center;
            font-family:"微軟雅黑";
            background-color:rgba(0,0,0,0.6);
            color:white;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("figure").hover(function () {
                if (!$(">figcaption", this).is(":animated")) {
                    $(">figcaption", this).animate({ "bottom": "0px" }, 200);
                }
            }, function () {
                if (!$(">figcaption", this).is(":animated")) {
                    $(">figcaption", this).animate({ "bottom": "-30px" }, 200);
                }
            })
        })
    </script>
</head>
<body>
    <figure>
        <img src="img/ciri.png" alt="">
        <figcaption> 《巫師3》之希里</figcaption>
    </figure>
</body>
</html>

預設情況下，預覽效果如圖 1 所示。

圖 1：預設效果