Question

当用户将鼠标悬停在无序菜单列表上时，我正在使用以下jQuery代码创建淡入淡出和淡出效果。然而，我似乎无法让淡入淡出工作。任何帮助都将非常感激。

以下是在线测试页面的链接： http://www.youmeusdesign.co.uk/menutest/

这是jQuery代码：

$(function(){
    $("#menu ul li").hover(function(){
             $(this).children("ul").fadeIn(500);
       },
       function(){
             $(this).children("ul").fadeOut(500);   
    })
})

这是HTML：

<div id="menu">
    <ul>
        <li aria-haspopup="true"><a href="index.html"></a>
            <ul>
                <li><a href="index.html">ABOUT</a>
                    <ul class="submenu1">
                        <li class="column1" aria-haspopup="false"><a href="index.html">Approach</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Team</a></li>
                    </ul>
                </li>    
                <li><a href="index.html">CASE STUDIES</a>
                    <ul class="submenu2">
                        <li class="column1" aria-haspopup="false">TITLE1</li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project A</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project B</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project C</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project D</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project E</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project F</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Project G</a></li>
                        <li class="column2 negative-margin-160" aria-haspopup="false">TITLE2</li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project H</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project I</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project J</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project K</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project L</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project M</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project N</a></li>
                        <li class="column2" aria-haspopup="false"><a href="index.html">Project O</a></li>
                    </ul>
                </li>
                <li><a href="index.html">NEWS &amp; PRESS</a>
                    <ul class="submenu3">
                        <li class="column1" aria-haspopup="false"><a href="index.html">News</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Press</a></li>
                        <li class="column1" aria-haspopup="false"><a href="index.html">Awards</a></li>
                    </ul>
                </li> 
                <li><a href="index.html">CONTACT</a>
                </li>       
            </ul>
        </li>       
    </ul>
</div>

Answer 1

在Firefox中工作但在chrome中无法使用aminate或show / hide

Answer 2

感谢您的评论。尝试过使用动画，它现在可以在Chrome和Safari中使用了，但是在页面加载后第一次将鼠标悬停在菜单上时，淡入淡出似乎不起作用，你必须重新悬停第二次来获取它工作：

以下是修改后的在线测试页面的链接：http://www.youmeusdesign.co.uk/menutest/

这是修改过的jQuery：

$(function(){
    $("#menu ul li").hover(function(){
             $(this).children("ul").animate(
            {"opacity": "1"},
            500);
       },
       function(){
             $(this).children("ul").animate(
            {"opacity": "0"},
            500);   
    })
})

非常感谢。

Answer 3

您的CSS与Javascript之间存在冲突。在你的CSS中，你有这个：

#menu ul ul {
    position: absolute;
    width: 545px;
    height: 270px;
    left: 0;
    top: 80px;
    display: none;
    padding-top: 20px;
    background: #CCC;
}

然后当你将鼠标悬停在其中一个li元素上时，你的CSS会这样做：

#menu ul li:hover > ul {
    display: block;
    background-image: none;
}

您的Javascript正在尝试淡化该元素，但为时已晚 - 此时该元素已由CSS设置为display: block。当您将鼠标悬停时，jQuery会为#menu ul li ul元素添加内联样式，并设置opacity: 0。

下次将鼠标悬停在元素上时，即使CSS将元素设置为display: block，元素仍会隐藏，因为它们被内联为opacity: 0，让它们可以根据需要淡入。< / p>

最快的解决方法是在#menu ul ul的CSS中将不透明度设置为0，尽管我很好奇为什么.fadeIn（）不适合你。

淡入/淡出菜单

3 个答案: