0

或者更确切地说，以我有限的知识，我无法弄清楚我做错了什么，以便它以这种方式表现。

我有一个包含联系表格的 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;}

与往常一样，非常感谢任何帮助。谢谢！

4

1 回答 1

0

我改变了你的鼠标离开功能。这是您的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)
            });
    });
});
});
于 2014-06-10T23:27:24.193 回答