rollovers jQuery e estados ativos
Pergunta
Peço desculpas por quaisquer perguntas/codificação estúpidas, sou muito novo no jQuery!
Estou tentando criar um menu para um site de uma página com rollovers e um estado ativo. 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);
}});
});
Portanto, existem dois problemas aqui:
Embora a classe ativa seja adicionada e nas ferramentas de desenvolvedor do Chrome, posso ver que a opacidade em uma classe ativa é "1", ela parece não funcionar no navegador, ou seja. A opacidade ainda aparece no navegador para ser "0,5".
Se $ (este) estiver ativo, mesmo depois de clicar em $ (isso) removendo assim a classe ativa, a opacidade permanece em "1". Se eu clicar em $ (isso) várias vezes, eventualmente a opacidade muda para "0,5".
Eu realmente apreciaria a ajuda. Eu tenho lutado com isso há oh ... 3 dias agora heh:-/
Muito obrigado antecipadamente...
Solução
Eu acho que isso deveria fazer o que você está tentando fazer
$(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;
});
});
Outras dicas
Experimente isso, triturou um pouco
$(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)
}});
});
Tente isso, acho que deveria funcionar:
$(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)
});
});