jquery翻转和活动状态

我为任何愚蠢的问题/编码道歉，我对jquery很新！

我正在尝试为具有翻转和活动状态的单页网站创建菜单。 HTML：

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. 即使添加了活动类，并且在Chrome的开发人员工具中，我可以看到活动类的不透明度为“1”，它似乎在浏览器中不起作用，即。 不透明度仍然在浏览器中显示为“0.5”。

2. 如果$（this）处于活动状态，即使单击$（this）从而删除活动类，不透明度仍为“1”。 如果我多次点击$（this），最终不透明度会变回“0.5”。

我非常感谢你的帮助。 我一直在努力争取这个……现在3天嘿： – /

提前谢谢了…

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

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

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