javascript - 控制jquery动画的速度

Question

我一直在从这里的社区获得有关构建此功能的帮助，我非常感谢 - js newb。但有些事情我似乎无法弄清楚。

我有一个相对定位的 div，它会在悬停触发器时滑入 View 。它随后将上述 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>

这是一些 CSS:

.site-navigation {
    background: #ccc;
    padding: 25px 0;
}
.other {
    background: #ccc;
    padding: 25px;
}
.dropdown-contain {
    display: none;
    opacity: 0;
    position: relative;
    width: 100%;
    z-index: 1;
    height: 100px;
}

这是 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"
            });
        });
    });
});

还有一个 fiddle .

谢谢!

Answer 1

slideToggle 之类的东西会向下滑动内容区域，然后淡入文本。

Updated Fiddle

$(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);
        });
    });
});