为菜单鼠标悬停添加淡入淡出效果

时间:2013-05-14 07:19:35

标签: jquery asp.net menu fadein fadeout

我有asp.net菜单喜欢,

  <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home" />
                    <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
                </Items>
            </asp:Menu>

这是我的CSS代码,

div.menu ul li a, div.menu ul li a:visited
{
border: 1px #4e667d solid;
color: #666666;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
font-family: Miriam;
background-color: #F9F9F9;
 }

 div.menu ul li a:hover
{
background-color: #CCCCFF;
color: #FF6600;
}

我已阅读this回答,我已将此代码添加到我的页面。

$('#header #menu li a').hover(function () {
$(this).fadeOut(0).addClass('hover').fadeIn(300);
},
function () {
$(this).fadeOut(300)
.queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() });
});

但是(淡入/淡出)效果对我不起作用,我的代码中出错了什么?

1 个答案:

答案 0 :(得分:0)

//Source:

..<body>
<form id="f1" runat="server">
<div id="fadediv" style="display:none">
...
</div>
</form>
</body>


//jquery:

<script type="text/javascript">
 $(document).ready(function () {
        $('#fadediv').fadeIn(2000);
    });
</script>
相关问题