我在下面有以下Jquery脚本,它在rollover上添加.hover类,然后在rollout上删除它。目前,背景(无论是图像还是颜色)很好地淡入淡出。但是,我不希望菜单文本淡入淡出。
我知道CSS3淡入淡出过渡和Jquery颜色插件,但是也希望在图像背景中有淡入淡出的选择(这就是为什么我想淡入一个类而不仅仅是背景颜色。)非常感谢任何帮助:)提前致谢。
Jquery的
$(document).ready(function () {
//Set the anchor link opacity to 0 and begin hover function
$("#menu-sample-menu li a").hover(function () {
//Fade to an opacity of 1 at a speed of 200ms
$(this).fadeOut(0).addClass('hover').fadeIn(300);
//On mouse-off
}, function () {
//Fade to an opacity of 0 at a speed of 100ms
$(this).fadeOut(300)
.queue(function () {
$(this).removeClass('hover').fadeIn(0).dequeue()
});
});
});
HTML
<nav id="access">
<ul id="menu-sample-menu" class="menu">
<li id="menu-item-198" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-198"><a href="http://www.threecell.com/demo/category/health-care-professional/">Health Care Professional</a>
</li>
<li id="menu-item-197" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-197"><a href="demo/category/web-designer/">Web Designer</a>
<ul class="sub-menu">
<li id="menu-item-199" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-199"><a href="category/construction-worker/">Construction Worker</a>
</li>
</ul>
</li>
</ul>
</nav>
风格
#access li {
position:relative;
float:left;
padding:0;
margin:0;
}
#access ul li:first-child {
padding-left:0;
}
#access a {
display:block;
padding:15px 24px;
color:#f0f0f0;
text-decoration:none;
}
#menu-sample-menu li {
color: black;
text-shadow: 0px 1px 4px #777;
background-color: green;
padding: 0 12px 0 12px;
}
#menu-sample-menu li a.hover {
background-color: orange;
background-image: url(images/over.jpg);
}
答案 0 :(得分:4)
您可以在不使用javascript的情况下执行此操作:http://jsfiddle.net/WjrnB/1/
只需使用:
#menu-sample-menu li a:hover {
background-color: orange;
background-image: url(images/over.jpg);
}
而不是
#menu-sample-menu li a.hover {
background-color: orange;
background-image: url(images/over.jpg);
}
并添加:
#menu-sample-menu li a {
-khtml-transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
答案 1 :(得分:0)
Xarcell的回答可能是最简单明智的。如果您希望使用JavaScript实现此目的,可以使用JQuery-UI,其中包含包含转换的addClass和removeClass函数。
基本上,HTML和CSS与上面相同,但JS看起来如下:
$(document).ready(function () {
//Set the anchor link opacity to 0 and begin hover function
$("#menu-sample-menu li a").hover(function () {
//Fade 'hover' class in at 300ms
$(this).addClass('hover', 300);
//On mouse-off
}, function () {
//Fade 'hover' class out at 300ms
$(this).removeClass('hover', 300);
});
});
当然,您必须包含JQuery-UI(我通常使用Cloud Flair的CDNJS):
http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
就个人而言,如果我已经在使用JQuery-UI,我会使用这种方法。否则,我会选择Xarcell的解决方案。