之前在“8.7 停止动画”这一节中，我们接触了jQuery动画中最常见的一个bug，也给大家详细探讨了这个bug的根本原因以及解决方法。实际上，除了stop()方法，我们还可以使用is()方法来解决这种bug。

在jQuery中，我们可以使用is()方法来判断元素是否正处于动画状态。如果不处于动画状态，则添加新的动画；如果正处于动画状态，则不添加新的动画。

语法：

if(!$().is(":animated"))
{
    //如果不处于动画状态，则添加新的动画
}

说明：

:animated是一个伪类选择器，表示选取所有正在执行动画的元素，我们在“3.8 其他伪类选择器”这一节中已经介绍过了。

举例：

在线测试
<!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>

默认情况下，预览效果如下图所示。

当鼠标移到图片上面，此时预览效果如下图所示。

分析：

在这个例子中，$(">figcaption", this)表示选取当前元素下面的子元素figcaption，它其实可以等价于$("figure>figcaption")。这种写法是jQuery的高级技巧，它其实借助了$()方法的第2个参数，当然我们在后续章节中会详细介绍。

此外，在实际开发中，is(":animated")比stop()方法更加容易理解，也更加常用。