Javascript 控制jquery动画的速度

我在这里的社区得到了构建这个函数的帮助，我非常感谢-js-newb。但有件事我似乎不明白

我有一个相对定位的div，当触发器悬停在上面时，它会滑入视图。它随后将上述div下面的内容向下推-完美。问题是我不知道如何控制滑入的潜水器的速度。我可以控制其他事情，比如说所说div中内容的不透明速度，但不能控制div出现的速度

如果有人能友好地解释我是如何影响滑动效果的速度的，我们将一如既往地非常感激

以下是我的标记：

<nav class="site-navigation" role="navigation">
    <div class="menu-1-container">
        <ul id="menu-1" class="menu">
            <li id="menu-item-1"> <a href="#">Releases</a>

            </li>
        </ul>
    </div>
</nav>

<div class="dropdown-contain">
    <p>Content</p>
</div>

<div class="other">
    <p>Other Content</p>
</div>

下面是jQuery：

$(function () {
    $(document).on("mouseover", "#menu-item-1, .dropdown-contain", function () {
        $(".dropdown-contain").css({
            "display": "block"
        });
        $(".dropdown-contain").stop().animate({
            opacity: 1
        }, 1000);
    });

    $(document).on("mouseleave", "#menu-item-1, .dropdown-contain", function () {
        $(".dropdown-contain").stop().animate({
            opacity: 0
        }, 1000, function () {
            $(".dropdown-contain").css({
                "display": "none"
            });
        });
    });
});

和一个

---

谢谢

类似于

slideToggle

的东西会将内容区域向下滑动，然后在文本中淡入淡出

---

谢谢@Goose，当我第一次将鼠标悬停在触发器上时效果很好，但当我将光标向下移动到.contain div下拉列表中的内容上时，它会向上滑动。一旦我完全移除光标，整个函数似乎表现得不稳定且有故障，它自己以不同的速度上下滑动。还要注意的是，我将

mouseover

更改为

mouseenter

，以解决该问题。如果需要，还可以添加

.stop（）

，以便在鼠标快速移动/移出时提供帮助。我添加了.stop（），这很有帮助，但仍然有点不稳定。如果你只是停留在触发器上，然后让触发器向上移动鼠标，看起来效果不错，但是如果你让鼠标向下移动到内容上，它仍然会闪烁。不确定查看实时站点是否有帮助

$(function () {
    $(document).on("mouseover", "#menu-item-1, .dropdown-contain", function () {
        $(".dropdown-contain").css({
            "display": "block"
        });
        $(".dropdown-contain").stop().animate({
            opacity: 1
        }, 1000);
    });

    $(document).on("mouseleave", "#menu-item-1, .dropdown-contain", function () {
        $(".dropdown-contain").stop().animate({
            opacity: 0
        }, 1000, function () {
            $(".dropdown-contain").css({
                "display": "none"
            });
        });
    });
});

$(function () {
    $(document).on("mouseenter", "#menu-item-1, .dropdown-contain", function () {
        $(".dropdown-contain").slideToggle(500, function() {
            $(this).fadeTo(500, 1);
        });
    });

    $(document).on("mouseleave", "#menu-item-1, .dropdown-contain", function () {
        $(".dropdown-contain").fadeTo(500, 0, function() {
            $(this).slideToggle(500);
        });
    });
});