renversements jquery et états actifs

Question

Je présente mes excuses pour toute question stupide/codage, je suis très nouveau pour jquery!

Je suis en train de créer un menu pour un site d'une page qui a des survols et un état actif. 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); 
    }}); 
}); 

Donc il y a deux problèmes ici:

1. Même si la classe active est ajoutée et dans les développeurs de Chrome outils que je peux voir que l'opacité sur une classe active est « 1 », il ne semble fonctionner dans le navigateur, par exemple. l'opacité apparaît toujours dans le navigateur pour être "0,5".

2. Si $ (ce) est actif, même après $ cliquant (ce) éliminant ainsi la classe active, l'opacité reste à "1". Si je clique $ (this) plusieurs fois , éventuellement l'opacité revient à « 0,5 ».

J'apprécierais vraiment l'aide. J'ai eu du mal avec cela pour oh ... 3 jours maintenant heh: -/

Un grand merci à l'avance ...

Answer 1

Je pense que cela devrait faire ce que vous essayez de faire

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

Essayez ceci, croquait vers le bas un peu

$(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 this , je pense que cela devrait fonctionner:

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