控制jquery动画的速度

Controlling the speed of a jquery animation

本文关键字：速度 动画 jquery 控制      更新时间：2023-09-26

我一直在从社区获得帮助，在这里构建这个函数，我非常感谢- js newb。但有些事我似乎不明白。

我有一个相对位置的div，当触发器悬停在上面时，它会滑入视图。它随后将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"
            });
        });
    });
});

和小提琴。

谢谢!

像slideToggle这样的东西会将内容区域向下滑动，然后在文本中淡出。

更新小提琴

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

相关文章：