<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        figure{
            position: relative;
            width: 240px;
            height: 200px;
            overflow: hidden;
        }
        img{
            width: 240px;
            height: 200px;
            border: 1px solid #666666;
        }
        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-3.5.1.js"></script>
    <script>
        //判断动画状态
        //$().is(":animated")
        $(function () {
           $("figure").hover(function () {
               if(!$("figure>figcaption").is(":animated"))
               {
                   $("figure>figcaption").animate({"bottom":"0px"},200);
               }
           },function () {
               if(!$(">figcaption",this).is(":animated"))
               {
                   $(">figcaption",this).animate({"bottom":"-30px"},200);
               }
           });
        });
        /*
        在jQuery中，：animated是一个伪类选择器，
        以上代码中，$(">figcaption",this)表示选取当前元素下面的子元素
        figcaption，其等价于$("figure>figcaption")。这种写法是jQuery
        的高级技巧，它借助了$()方法的第2个参数。
         */
    </script>
</head>
<body>
    <figure>
        <img src="./img/1.png" alt="1.png">
        <figcaption>图片标题</figcaption>
    </figure>
</body>
</html>