或者更确切地说,以我有限的知识,我无法弄清楚我做错了什么,以便它以这种方式表现。
我有一个包含联系表格的 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;}
与往常一样,非常感谢任何帮助。谢谢!