2

Tenho este código mas não entendo porquê o método .toggleClass() não está a funcionar como esperado para alterar a opacidade do elemento:

Exemplo no JSFiddle

HTML

<div id="admin">
    <p><br/>Admin</p>
    <form method="POST" action="loginAdmin.php">Username:
        <br/>
        <input type="text" name="username" />
        <br />Password:
        <br/>
        <input type="password" name="password" />
        <br />
        <div id="button">
            <button id="btn" name="send" type="submit" value="enviar">Login</button>
        </div>
    </form>
</div>

CSS

#admin {
    position: absolute;
    margin-top: 140px;
    right: 200px;
    width: 224px;
    z-index: 1;
    height: 140px;
}
#admin p {
    font-family: Lato-Light;
    float: right;
    cursor: pointer;
    color: blue;
    bottom: 0;
    right: 15px;
    position: absolute;
    font-size: 11px;
    opacity: 0.3;
}
.adminPvisible {
    opacity:1;
}
#admin p:hover {
    opacity: 1;
}
#admin form {
    display: none;
    font-family:Lato-Light;
    font-size: 11px;
    margin:35px 0 0 100px;
}
#btn {
    display: none;
    font-size: 12px;
    margin: 5px 0 0 0;
    font-family: Lato-Regular;
}
#admin input {
    width: 120px;
    font-size: 12px;
    margin: 0;
    height: 20px;
}

jQuery

$(document).ready(function () {
    $('#admin > p').click(function () {
        $(this).toggleClass('adminPvisible');
        var right = $('#admin > p').css('right') == '135px' ? '0' : '135px';
        $('#admin > p').animate({
            right: right,
            width: '50px'
        });
        $('#admin > form, #btn').stop(true).slideToggle();        
    })
})

3 Respostas 3

3

O que está acontecendo não é uma falha do jQuery, porém uma função do CSS.

Ele é organizado por ordem de especificidade, regras com maior prioridade são aplicadas mesmo se declaradas antes das de menor especificidade. Aplica-se uma regra de pontuação:

  • Estilos vindos do atributo style valem 1000 pontos, ids (#admin), 100 pontos, classes (.adminPvisible), 10 pontos, e tags(p) tem prioridade mínima, 1 ponto.
  • Pseudo-classes, pseudo-elementos, @media e similares não influenciam na pontuação.
  • No fim as pontuações são somadas, ou, se forem regras marcadas com !important ,tornam-se de prioridade máxima. Caso múltiplas regras encaixem-se na mesma situação ganha a definida pelo style ou a última.

Para resolver o problema você tem algumas opções:

  • (recomendada) Nunca use IDs no CSS: por eles terem uma especifidade tão alta eles geralmente não podem ser sobrescritos.
  • Ao declarar uma regra que vai sobrescrever uma regra definida por uma ID inclua ela junto: .adminPvisible vira #admin > p.adminPvisible.
  • (não recomendado) use !important.

Mais informações: MDN | SmashingMagazine - Demonstração: JSFiddle

1

Como já referenciado em outras respostas, o jQuery .toggleClass() (Inglês) está a funcionar, o problema é a classe de CSS tem uma prioridade mais baixa que as definições dadas previamente via #admin p.

De forma resumida, ao passares estilos para o selector #admin p estás a ser muito rigoroso, e quando uma classe não rigorosa é atribuída, o navegador não a vai respeitar para sobrepor as definições.

Duas formas simples de resolveres a tua questão:

  1. Classes para cada definição

    Ao invés de usares uma classe para sobrescreve a definição de um elemento, se essa definição é mutável, o mais prático é teres duas classes, cada uma com o estado pretendido e alternar entre elas:

    Exemplo no JSFiddle

    CSS

    .adminPnearInvisible {
        opacity: 0.3;
    }
    .adminPvisible {
        opacity:1;
    }
    

    HTML

    <div id="admin">
        <p class="adminPnearInvisible"><br/>Admin</p>
        ...
    

    jQuery

    ...
    $(this).toggleClass('adminPvisible adminPnearInvisible');
    ...
    

    O que estamos a fazer é usar o .toggleClass() (Inglês) para alternar duas classes. Como estava no elemento a classe .adminPnearInvisible, ao alternar entre ela e a .adminPvisible, estamos efectivamente a remover uma e adicionar outra, atribuindo assim ao elemento o estilo que cada uma contém sem precisarmos de nos preocupar com os estilos "base" do elemento.

  2. Definir de forma rigorosa o estilo a subscrever

    Podes optar por definir com o mesmo rigor os dois estados da opacidade, o que vai dizer ao navegador que prevalece o que vem em 2º lugar se aplicável:

    Exemplo no JSFiddle

    CSS

    Passamos a ter a tua classe .adminPvisible com o mesmo rigor dos estilos do elemento onde defines a opacidade inicial. Como já tens o valor no :hover, estou a juntar as duas coisas para evitar duplicar declarações na folha de estilos:

    #admin p:hover,
    #admin p.adminPvisible{
        opacity: 1;
    }
    

    HTML

    Sem alterações ao teu inicial...

    jQuery

    Sem alterações ao teu inicial...


Não relacionado mas pode ser útil é uma ligeira optimização do teu código para reduzir o mesmo e ao mesmo tempo evitar consultas recorrentes ao DOM para localizar o mesmo elemento:

Exemplo no JSFiddle

$('#admin > p').click(function () {
    var $this = $(this);
    $this.toggleClass('adminPvisible').animate({
        right: $this.css('right') == '135px' ? '0' : '135px'
    });
    $('#admin > form, #btn').stop(true).slideToggle();        
});

Explicação

// colocar elemento em cache para não andarmos sempre à procura dele
var $this = $(this);

// jQuery permite encadeamento dos métodos, por isso numa linha podes
// fazer a alternância da classe e chamar a animação
$this.toggleClass('adminPvisible').animate(...

// podes ter a verificação do valor e atribuição do novo para a animação
// na declaração do valor pretendido para animar o right
right: $this.css('right') == '135px' ? '0' : '135px'

E passei a largura de 50px para a folha de estilos pois a mesma não está a ser manipulada, ou seja, estás a dizer que a partir do primeiro clique o elemento fica com 50 pixeis de largura.

1
  • Muito obgado mais uma vez Zuul, muito claro e directo à questão, esclareceste mais do que uma duvida. Cheers
    – Miguel
    Commented 27/02/2014 às 15:14
1

Basicamente o que faltava era apenas colocar !important no do .adminPvisible dessa forma ele força a opacidade ser 1 enquanto a classe estiver no elemento.

No exemplo que você postou o .toggleClass() funciona perfeitamente, você só precisa dizer que a classe .adminPvisible é mais importante que o #admin p

jsfiddle

1
  • No caso ele adicionar o !important é desnecessário e geralmente deve ser evitado. Ele precisa apenas especificar melhor as regras a serem aplicadas, como dito na resposta do Gustavo Rodrigues
    – Moykn
    Commented 27/02/2014 às 13:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .