非常抱歉如果我问了一些愚蠢的问题或者写了一些糟糕的代码,因为我对jquery非常陌生!
我正在尝试为一个单页网站创建一个带有鼠标悬停效果和活动状态的菜单。HTML代码如下:
<ul id="menu">
<li><a class="rollover" href="#"><img class="folio" src="images/folio3.png" /></a></li>
<li><a class="rollover" href="#"><img class="services" src="images/services3.png" /></a></li>
<li><a class="rollover" href="#"><img class="about" src="images/about3.png" /></a></li>
<li><a class="rollover" href="#"><img class="contact" src="images/contact3.png" /></a></li>
</ul>
jQuery:
$(document).ready(function(){
$("a.rollover").fadeTo(1,0.5);
$("a.rollover").hover(
function() {$(this).fadeTo("fast",1);},
function() {$(this).fadeTo("fast",0.5);});
$("a.rollover").click(function(){
if($(".active").length) {
if($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).fadeTo("fast",0.5);
} else {
$(".active").fadeTo("fast",0.5);
$(".active").removeClass("active");
$(this).addClass("active");
$(this).fadeTo("fast",1);
}
} else {
$(this).addClass("active");
$(this).fadeTo("fast",1);
}});
});
所以这里有两个问题:
- 即使添加了active类,并且在Chrome的开发者工具中可以看到active类的不透明度为“1”,但在浏览器中似乎不起作用,即不透明度仍然显示为“0.5”。
- 如果$(this)是活动状态,即使点击$(this)以删除活动类,不透明度仍保持为“1”。如果我多次点击$(this),最终不透明度会改回“0.5”。
非常感谢您的协助。