jQuery向下滑动，然后是fadein内容

我想知道是否有人可以帮忙，我正在尝试复制一个客户喜欢的菜单（原则上）：

到目前为止，我已经试着查看站点背后的代码/jquery，但它似乎过于复杂（至少对我来说），我已经走了这么远

理想情况下，我希望div向下滑动，然后内容在mousein上淡入（然后在mouseout上淡入），但作为jQuery新手，我已经尝试了几个小时。

也许是什么

---

本质上，当下拉列表的父项的slideDown（）完成后，我将通过回调来淡出下拉列表的内容，反之亦然。

我想向您介绍的是专门用于、和函数的文档

可以选择在动画完成后执行“完成”功能。这就是您希望在幻灯片后执行淡入淡出，反之亦然

在蒂卡的《解决方案》中，需要另一个div来分别进行淡入和滑落

<div class="answer" id="a1">
    <div class="answer_content">
        What makes us different
        <br />Vision & Values
        <br />Our Story
        <br />Our People
    </div>
</div>

这是我在示例网站上看到的。它所做的只是扩展容器，并在菜单运行时保持这种状态

$('#container').on({
    mouseenter: function() {
        $(this).animate({height: '200px'});
    },
    mouseleave: function() {
        $(this).animate({height: '53px'});
    }
});

我补充说

<div id="container">

---

作为一个整体包装。此外，您还应更改项目上的重复ID，并改用class

考虑使用css3执行此操作为什么要让人们悬停在空白处以查看文本？这是一种糟糕的用户体验，看起来速度很慢。你现在得到的看起来不错now@Huangism我想你误解了我的意思。。。看看示例站点哦，我看到了，基本上是滑下容器，然后淡入内容。我们的解决方案是否有用，或者您是否在寻找其他解决方案？我很想看看你问题的最终解决方案。谢谢乔纳森，这几乎是完美的，我所需要做的就是按照下面黄氏的答案将其包装在一个容器中，这将是正确的！干杯，太棒了！我很高兴能帮上忙！谢谢你的帮助，我想借用你的建议，把它包装在一个容器里，但要使用上面乔纳森的代码！干杯，谢谢你的帮助，蒂卡，我想第一个差点就搞定了。干杯，马特

$(document).ready(function () {
    var qcContainer = $('#qc1,#qc2,#qc3');

    qcContainer.hover(
    // On mouse enter function
    function () {
        qcContainer.find('.answer').stop(true, true).slideDown(
            "slow", function () {
            // slideDown is complete, now for fadeIn
            qcContainer.find('.answer_content').stop(true, true).fadeIn('slow', function () {
                // Animation complete.
            });
        });

    },
    // On mouse leave function
    function () {
        qcContainer.find('.answer_content').stop(true, true).fadeOut(
            "slow", function () {
            // fadeOut complete, time for slideUp
            qcContainer.find('.answer').stop(true, true).slideUp("slow", function () {
                // Animation complete.
            });
        });
    });
});

$('#container').on({
    mouseenter: function() {
        $(this).animate({height: '200px'});
    },
    mouseleave: function() {
        $(this).animate({height: '53px'});
    }
});

<div id="container">