javascript - jQuery hoverintent 创建和删除元素

Question

我有一个脚本可以在鼠标悬停时为我的菜单 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)

Answer 1

我不确定这是否是正确的方法，但通过干预我有点实现了我想要的。我做了以下事情:

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/

在选择答案之前，我想等待任何人用更好、更干净的解决方案更新它。