我有一个脚本可以在鼠标悬停时为我的菜单 ul 元素设置动画。它还为 ul 创建了一个背景元素。我制作了这个脚本:
jQuery(document).ready(function($) {
$(".main-navigation ul:first > li").hoverIntent({
sensitivity: 1,
interval: 100,
timeout: 400,
over: function() {
if ($(this).children().length > 1) {
$(this).parent().prepend('<div class="sub-nav" style="position: absolute; top: 0px; left: 250px; display: block; opacity: 1;"></div>');
$(this).children("ul").css({
"display" : "block",
"left" : "250px",
}).stop().animate({
top: '-50px',
opacity: 1,
}, 500)
}},
out: function() {
$(".sub-nav").remove();
$(this).children("ul").stop().animate({
"top" : "-500px",
"opacity": 0,
}, 500).css({
"display" : "none",
})
}
})
});
它工作正常,但是当我选择那个菜单下面的另一个菜单时,问题就出现了。所以,我有两个带有子菜单的菜单。如果我分别选择它们中的每一个,一切正常,但如果我选择第一个然后移动到另一个背景元素 (.sub-nav) 不会出现。
我错过了什么?
JS fiddle :http://jsfiddle.net/r8vx07ae/10/ (尝试将鼠标从菜单项#2 移到菜单项#3)
最佳答案
我不确定这是否是正确的方法,但通过干预我有点实现了我想要的。我做了以下事情:
jQuery(document).ready(function($) {
$(".main-navigation ul:first li").hoverIntent({
sensitivity: 1,
interval: 100,
timeout: 400,
over: function() {
if ($(this).children().length > 1) {
$(this).parent().prepend('<div class="sub-nav" style="position: absolute; top: 0px; left: 250px; display: block; opacity: 1;"></div>');
$(this).children("ul").css({
"display" : "block",
"left" : "250px",
}).animate({
top: '-50px',
opacity: 1,
}, 500)
}}
})
.mouseleave(function() {
$(".sub-nav").remove()
$(this).children("ul").stop().animate({
"top" : "-500px",
"opacity": 0,
}, 500).css({
"display" : "none",
})
})
});
这解决了我的问题。它就像我想要的那样工作。
JS Fiddle 也更新了:http://jsfiddle.net/r8vx07ae/11/
在选择答案之前,我想等待任何人用更好、更干净的解决方案更新它。
关于javascript - jQuery hoverintent 创建和删除元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28149950/