jQuery的鼠标悬停和活动状态

Question

非常抱歉如果我问了一些愚蠢的问题或者写了一些糟糕的代码，因为我对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);
    }});
});

所以这里有两个问题：

1. 即使添加了active类，并且在Chrome的开发者工具中可以看到active类的不透明度为“1”，但在浏览器中似乎不起作用，即不透明度仍然显示为“0.5”。
2. 如果$(this)是活动状态，即使点击$(this)以删除活动类，不透明度仍保持为“1”。如果我多次点击$(this)，最终不透明度会改回“0.5”。

我非常感谢您的帮助。我已经为此苦苦挣扎了3天了。:-/

非常感谢您的协助。

- circey

Answer 1

我认为这应该能够完成你想要做的事情。

$(document).ready(function(){   
    $("a.rollover").fadeTo(1,0.5);
    $("a.rollover").hover(function(){
        $(this).fadeTo("fast",1);
    },function(){
        if(!$(this).hasClass('active'))
        {
            $(this).fadeTo("fast",0.5);
        }
    });
    $("a.rollover").click(function(){
        if($('.active').length > 0)
        {                
            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);
        }
        return false;
    });
});

- Nalum

---

是的，当然了！非常感谢 :-) - circey

Answer 2

试试这个，压缩一下

$(function(){   
  $("a.rollover").fadeTo(1,0.5);
  $("a.rollover").hover(
    function() {$(this).stop().fadeIn("fast");},
    function() {$(this).stop().fadeTo("fast",0.5);}
  ).click(function(){
    var ia = $(this).hasClass("active"); //Was it active before?
    $(".active").fadeTo("fast",0.5).removeClass("active"); //Remove actives
    $(this).toggleClass("active", !ia); //Switch active to reverse of previous
    $(".active").stop().fadeIn("fast");//Fade in anything active (this if it is)
  }});
});

- Nick Craver

---

谢谢Nick的非常快捷的回答！不幸的是，虽然悬停和添加/删除“active”类都有效，但我仍然有同样的问题：1.在开发者工具中，“active”类的不透明度为“1”，但在浏览器中仍然显示为0.5。2.单击活动img会删除活动类，但不透明度仍然保持在“1”。多次单击同一img最终会将不透明度更改为“0.5”，但这也可能发生在img切换回“active”类时。 - circey

@circey - 对于问题#1，css类的属性和特定元素的内联属性总是可以不同的。对于问题#2，在你的情况下，我建议删除所有CSS中的不透明度声明，我认为这将大大简化你尝试做的事情。 - Nick Craver

谢谢，但是CSS中根本没有透明度声明，CSS中也没有".active"类的任何属性。 - circey

Answer 3

试试这个，我想它应该可以工作：

$(function() {
    $("a.rollover img").fadeTo(1, 0.5);
    $(".active").fadeTo(0.5, 1);

    $("a.rollover img").hover(
        function() {
            if ( ! $(this).hasClass("active")) {
                $(this).stop().fadeTo("fast", 1);
            }
        },
        function() {
            if ( ! $(this).hasClass("active")) {
                $(this).stop().fadeTo("fast", 0.5);
            }
        }
    ).click(function() {
        var ia = $(this).hasClass("active"); //Was it active before?
        $(".active").fadeTo("fast", 0.5).removeClass("active"); //Remove actives
        $(this).toggleClass("active", !ia); //Switch active to reverse of previous
        $(".active").stop().fadeTo("fast", 1); //Fade in anything active (this if it is)
    });
});

- David Hancock

---

不，这个也不行。不过还是谢谢你的努力！ - circey