Question

我一直在从社区建立这个功能获得帮助，我非常感谢 - 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"
            });
        });
    });
});

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

控制jquery动画的速度

1 个答案: