fadeTo 和 slideToggle 行为奇怪

Question

或者更确切地说，以我有限的知识，我无法弄清楚我做错了什么才能让它表现得这样。

我有一个包含联系表单的 div。 div 是隐藏的，但是当用户将鼠标悬停在导航栏中的“联系人”上时，div 会向下滑动以显示表单。客户希望“联系人”一词在该空间中显示 0.5 秒 - 然后淡出 - 然后让表单淡入。

我的问题是，当用户将光标悬停在表单上时（不可避免地会这样），它会淡出然后又快速淡入 - 这种行为似乎会破坏顺序动画的流程并导致其他奇怪的行为，以及。

想知道是否有人可以指出我的错误。

我会在下面添加我的js，我在这里设置了一个小提琴：http://jsfiddle.net/zMdw6/

$(function () {
    $(document).on("mouseenter", "#the-menu-item, .the-hidden-div", function () {
        $(".the-hidden-div").stop().slideDown(500, function() {
            $(".the-word").stop().fadeTo(200, 0, function() {
                $(".the-form").fadeTo(200, 1)
            });
        });
    });

    $(document).on("mouseleave", "#the-menu-item, .the-hidden-div", function () {
        $(".the-form").stop().fadeTo(500, 0, function() {
            $(".the-hidden-div").stop().slideToggle(500, function() {
                $(".the-word").fadeTo(1000, 1)
            });
        });
    });
});

css:

.the-hidden-div {display: none;}
.the-word {opacity: 1;}
.the-form {opacity: 0;}

一如既往，非常感谢任何帮助。谢谢！

Answer 1

我改变了你的鼠标离开功能。这是您的jsfiddle 的更新。

$(function () {
$(document).on("mouseenter", "#menu-item-471, .dropdown-contain", function () {
    $(".dropdown-contain").stop().slideDown(500, function() {
            $(".big-intro").stop().fadeTo(200, 0, function() {
                 $(".dc-content").fadeTo(200, 1)
              });
    });
});

$("#menu-item-471, .dropdown-contain").not('#menu-item-471').mouseleave(function () {
    $(".dc-content").stop().fadeTo(500, 0, function() {
        $(".dropdown-contain").stop().slideToggle(500, function() {
             $(".big-intro").fadeTo(1000, 1)
            });
    });
});
});