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

我改变了你的mouseleave功能。这是您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)
            });
    });
});
});

fadeTo和slideToggle奇怪地说

1 个答案: