Jquery sweeps and active states

Question

I apologize for any silly questions / coding, I am very new to jquery!

I am trying to create a menu for a one page website that has rollovers and an active state. 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); }}); }); 

So there are two problems here:

• Despite the fact that the active class is added in the Chrome developer, I see that the opacity of the active class is "1", it does not seem to work in the browser, ie opacity is still displayed in the browser "0.5".

• If $ (this) is active, even after pressing the $ (this) button, deleting the active class, the opacity remains at “1”. If I press $ (this) several times, in the end, the opacity changes to "0.5".

I am very grateful for the help. I struggled with this for about ... 3 days now heh: - /

Thank you very much in advance...

Answer 1

I think this should do what you are trying to do.

 $(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

Try it with a little bend

 $(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

Try it, I think it should work:

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