jquery滚动和活动状态

我为任何愚蠢的问题/编码道歉，我对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>

所以这里有两个问题：

即使活动类是 在Chrome的开发者中添加和 我可以看到工具上的不透明度 活动类是“1”，它不是 似乎在浏览器中工作，即 不透明度仍然显示在浏览器中 为“0.5”

如果$（此）处于活动状态，即使在 单击$（this），从而删除 在活动类中，不透明度保持不变 "1". 如果我点击$（这个）几个 时间，最终是不透明的 更改回“0.5”

我非常感谢你的帮助。我已经为此挣扎了很久了。。。3天了，呵呵：-/

---

非常感谢您的光临……

试试这个，吃点苦头

$(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)
  }});
});

---

试试这个，我认为它应该有用：

$(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)
    });
});

---

我认为这应该做你想做的

$(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;
    });
});

---

谢谢尼克的快速回答！不幸的是，虽然hover和add/remove“active”类都可以工作，但我仍然有相同的问题：1。开发者工具中活动类的不透明度为“1”，但在浏览器中仍显示为0.5。2.点击一个激活的img会移除激活的类，但不透明度保持在“1”。在同一个img上单击几次最终会将不透明度更改为“0.5”，但在img切换回“活动”类时也会发生这种情况。@circey-对于#1，css类的属性和特定元素上的内联属性总是不同的。对于#2，在您的情况下，我将从css中删除所有不透明度声明，我认为这将大大简化您的操作。谢谢，但是css不包含任何不透明度声明，css也不包含“.active”类的任何属性。是的，它当然是！非常感谢：-）不，这也不行。谢谢你的努力！

$(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;
    });
});