Question

我有这个jQuery DropDown菜单似乎与一个轻微的烦人问题很好地工作。当您随机悬停在菜单上时，子菜单将淡出。不总是，只是随机的。其他时候子菜单似乎显示正常。所以子菜单只会随机消失。我不太了解jQuery，所以我希望有人能看到我做错了什么。谢谢！

代码：

$(document).ready(function(){
$('#solutions-btn').hover(function(){
    $('#solutions-drop').css('display','block');
    $('#quality-drop').css('display','none');
    $('#american-drop').css('display','none');
    $('#products-drop').css('display','none');
    $('#about-drop').css('display','none');
});

$('#quality-btn').hover(function(){
    $('#solutions-drop').css('display','none');
    $('#quality-drop').css('display','block');
    $('#american-drop').css('display','none');
    $('#products-drop').css('display','none');
    $('#about-drop').css('display','none');
});

$('#american-btn').hover(function(){
    $('#solutions-drop').css('display','none');
    $('#quality-drop').css('display','none');
    $('#american-drop').css('display','block');
    $('#products-drop').css('display','none');
    $('#about-drop').css('display','none');
});

$('#products-btn').hover(function(){
    $('#solutions-drop').css('display','none');
    $('#quality-drop').css('display','none');
    $('#american-drop').css('display','none');
    $('#products-drop').css('display','block');
    $('#about-drop').css('display','none');
});

$('#about-btn').hover(function(){
    $('#solutions-drop').css('display','none');
    $('#quality-drop').css('display','none');
    $('#american-drop').css('display','none');
    $('#products-drop').css('display','none');
    $('#about-drop').css('display','block');
});

var timer;
$('#main-menu a').hover(function(){
    $('#drop-menu').fadeIn( 200 );
},function(){
    timer = setTimeout(function(){$('#drop-menu').fadeOut( 200 );}, 1500);
});

$('#drop-menu').hover(function(){
    clearTimeout(timer);
},function(){
    $('#drop-menu').fadeOut( 200 );
});

});

JS小提琴链接： http://jsfiddle.net/20wfqzxz/

将鼠标悬停在底部的链接上。将它们悬停一秒钟，即使在链接上，您也会看到它们消失。

Answer 1

您需要将代码编辑为：

var timer;
$('#main-menu a').hover(function(){
    $('#drop-menu').fadeIn( 200 );
    clearTimeout(timer);
},function(){
    timer = setTimeout(function(){$('#drop-menu').fadeOut( 200 );}, 1500);
});

$('#drop-menu').hover(function(){
    clearTimeout(timer);
},function(){
    $('#drop-menu').fadeOut( 200 );
});

Fiddle ..希望有所帮助..

Answer 2

您可以尝试在执行任何其他动画之前添加停止动画功能。例如，$('#drop-menu').stop().fadeIn( 200 );和$('#drop-menu').stop().fadeOut( 200 );所以这些动画不会相互毁灭。

Answer 3

首先，在开始新动画之前停止动画。

$("#drop-menu").stop();

其次，删除计时器和settimeout命令 - 如果停止动画，你将不再需要它们！

jQuery菜单淡出仍在链接上

3 个答案: