0

当用户将鼠标悬停在无序菜单列表上时，我正在使用以下 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>
4

3 回答 3

0

感谢您的意见。已尝试使用 animate，它现在可以在 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);   
    })
})

非常感谢。

于 2013-03-19T22:16:59.453 回答
0

在 Firefox 中工作，但在 chrome 中不起作用，使用 aminate 或显示/隐藏

于 2013-03-19T21:45:06.257 回答
0

您遇到了 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 正在尝试淡入该元素，但为时已晚——此时，该元素已被display: blockCSS 设置为。当你将鼠标悬停时，jQuery 会为#menu ul li ul元素添加一个内联样式，设置opacity: 0.

下次您将鼠标悬停在元素上时，即使 CSS 将元素设置为display: block，这些元素仍将保持隐藏，因为它们被内联为opacity: 0，让它们根据需要淡入。

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

于 2013-03-20T00:35:00.517 回答