如何让我的悬停标题仅在鼠标悬停并向上/向下滑动时出现？

Question

目标是在鼠标悬停/悬停时通过向上滑动使标题（带文本的透明度）出现（在图像上方），并在鼠标不再悬停时通过向下滑动消失。我是 javascript 新手，只有中级 HTML 和 CSS 技能。我尝试了很多不同的脚本，但这是我最接近让它工作的。请帮忙，我不明白我做错了什么！谢谢：）

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

        $(document).ready(function(){
            // jQuery goes here. 

    $(".box").hover(function(){
        $(this).find('overlay').animate({
                    bottom: '0%'}, 'slow' );
                    },
                    function() {
                    $(this).find('overlay').animate({
                    bottom: '-100%'
                    },'slow');}
             );}

    </script>

    <style type="text/css">

        body,html{
            position: relative;
            width:100%;
            height:100%;
            margin:0 auto;
            text-align:center;
            }

        #container{
            position:relative;
            width:500px;
            margin: 0 auto;
            }

        a {
            margin: 20px;
        }

        .box{
            display:block;
            height:200px;
            width:500px;
        }

        /* box one */

        .box.one{
            background-image: url(yodawg.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        .box.one:hover .overlay{
            position: absolute;
            bottom: -100%;
            }

        /* box two */

        .box.two{
            background: url(firstworld.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }
        .box.two:hover .overlay{
            position: absolute;
            bottom: -100%;
            }

        /* box three */

        .box.three{
            background: url(philosoraptor.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        .box.three:hover .overlay{
            position: absolute;
            bottom: -100%;
            }

        /* the overlay */

        .box .overlay{
            width: 500px;
            height: 200px;
            background-color: #000;
            opacity: .5;
            color: #FFF;
            text-align:center;
            font-family:"Arial Black", Gadget, sans-serif;
            font-size:36px;
            padding: 50px 0 0 0;
        }

    </style>
</head>

<body>

    <div id="container">

        <a class="box one"> 
            <div class="overlay">
                <p>yo dawg</p>
            </div>
        </a>
        <a class="box two">
            <div class="overlay">
                <p>first world problems</p>
            </div>
        </a>
        <a class="box three">
            <div class="overlay">
                <p>philosoraptor</p>
            </div>
        </a>

        </div>

</body>

</html>

Answer 1

这段代码有一些错误，可以使用slideToggle()：

$(this).find('overlay').animate({
    bottom: '0%'}, 'slow' );
    },
    function() {
    $(this).find('overlay').animate({
    bottom: '-100%'
    },'slow');}
);} // Unexpected `;`

.

// Better
$('.box').hover(function(){ $(this).find('overlay').slideToggle('slow'); });