控制jQuery动画的速度

Question

I've been getting help with building this function from the community here, which I'm very thankful for - js newb. But there's something that I can't seem to figure out.

I have a relatively positioned div that slides into view when a trigger is hovered over. It subsequently pushes the content below said div down - perfect. The problem is I can't figure out how to control the speed of the div that being slid in. I can control other things, like say the speed of the opacity of the content in said div, but not how quickly that div appears.

If someone can be kind enough to explain how I can affect the speed of slide effect it would be greatly appreciated, as always.

Here's my markup:

<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>

Here's some 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;
}

And here's the 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"
            });
        });
    });
});

And a fiddle .

thanks!

Answer 1

Something like slideToggle will slide the content area down, and then fade in the text.

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