jquery - 我无法使菜单下拉淡入淡出效果起作用。 (初学者)

Question

我对编码网站比较陌生，目前正在为自己创建一个在线作品集，但是我被下拉菜单淡入淡出效果困住了，即使我已经尝试过，我似乎也无法在 Jquery 或 CSS 中修复不同的教程。 (注意我是初学者)

所以我想问你们的问题是，我需要添加什么才能使淡入和淡出在我的子菜单上正常工作到 “Portfolio”？

HTML

<nav id="navbar">
    <div id="navbarcontent">
        <ul>
            <a href="index.html">
                <li class="hem">
                    <p>Hem<p>
                </li>
            </a>

            <a href="#">
                <li>
                    Portfolio
                    <ul>

                        <a href="illustrator.html">
                            <li>
                                Illustrator
                            </li>
                        </a>

                        <a href="photoshop.html">
                            <li>
                                Photoshop
                            </li>
                        </a>
                        <a href="illustrator.html">
                            <li>
                                InDesign
                            </li>
                        </a>
                    </ul>   

                </li>

            </a>

CSS

#navbar #navbarcontent ul {
    float:left;
    margin: 0px 0px 4px -32px;
    width:600px;
    padding-top:29px;
}
#navbar #navbarcontent ul li {
    float:left;
    padding: 5px 10px;
}
#navbar #navbarcontent ul a {
    color:white;
    font-weight:bold;
}
#navbar #navbarcontent ul ul {
    display:none;
}
#navbar #navbarcontent ul li.active {
    position: relative;
    float:left;
    cursor:pointer;
}
#navbar #navbarcontent ul li.active:hover {
    background-color:#43b1ff;
}
#navbar #navbarcontent ul li.active > ul {
    display:block;
    position: absolute;
    top:32px;
    left:0px;
    margin-left:0px;
    width:100%;
    padding-top:0px;
}

JQUERY

   $("#navbar ul li").hover(function() {
            $(this).addClass("active");
        }, function() {
            $(this).removeClass("active");
        });

Answer 1

我将为您介绍这两种方式的基础知识。

第一种方式是使用css，

ul#mainNav > li {
    float: left;
    width: 25%;
    text-align: center;
    line-height: 70px;
    display: block;
    -webkit-transition: all 1s ease;
}

ul#mainNav > li:hover {
    background: rgba(0, 0, 0, 0.4);
}

.subNav {
    -webkit-transition: opacity 1s ease;
}

ul#mainNav li:hover .subNav {
    opacity: 1;
}

这将允许 subNav 以 opacity 淡入。 (不是在 subNavs 上淡入淡出的最佳方式)(JSFIDDLE CSS)

这是 jQuery 方法，

$('ul#mainNav li').on('click', function() {
    $(this).find('.subNav').fadeToggle(1000);
});

(这个干净简单，这里是 JSFIDDLE jQuery )

(jQuery 悬停状态)

$('ul#mainNav li').on('mouseenter', function() {
    $(this).find('.subNav').fadeIn(1000);
}).on('mouseleave', function() {
    $(this).find('.subNav').fadeOut(1000);
});

( JSFIDDLE )