5

Estou tentando acessar as div's da classe '.contentParagraph' especifico de cada uma das div's '.content', para que os eventos de uma div não interfira no evento da outra, segue o código:

http://jsfiddle.net/turiba/tpz1gka3/

Se voces observarem, o paragrafo na primeira div '.content' aparece mesmo que eu passe o mouse emcima das outras div's, como faço para que isso não aconteça?

Qualquer outra observação em meu código será bem-vinda.

3 Respostas 3

4

Duas coisas:

Primeiro, colocar o código do jQuery no bloco de Javascript do JSFiddle é crime. Se você olhar o canto esquerdo superior do Fiddle, tem uma opção lá para incluir jQuery automaticamente ;)

Segundo: você pode buscar elementos que são descendentes de outro elemento. Uma vez que você declarou o evento para todos os elementos da classe content:

$('.content').mouseenter(function() {
   $(this).animate({
       width: '+=750px',
       opacity: '+=0.65'
   });

   $('.contentParagraph').fadeTo('fast',1);
});

Você pode substituir a instrução na última linha por:

$(this).find('.contentParagraph').fadeTo('fast',1);

O método find encontra os descendentes do elemento no qual é chamado, que atendam a condição de pesquisa que você passar. Mas isso não é eficiente. Você vai fazer uma busca toda vez que disparar o evento. No seu caso são poucos elementos e pode até ser rápido, mas se algum dia seu HTML inchar, isso pode prejudicar a performance.

Consigo pensar em algumas alternativas, que você pode experimentar:

Criar um dicionário de ids dos elementos das classes content para os elementos da classe contentParagraph. Algo como:

var contentDictionary: {
    content1: $("#paragraph1"),
    content2: $("#paragraph2"),
    content3: $("#paragraph3")
    /**etc., etc./
}

Daí seu evento ficaria algo como:

$('.content').mouseenter(function() {
    var that = $(this);
    that.animate({
        width: '+=750px',
        opacity: '+=0.65'
    });

   contentDictionary[that.id].fadeTo('fast',1);
});

A segunda alternativa é dar uma classe a mais para os content dentro do evento mouseenter, e tirar essa classe extra no evento mouseleave. Daí você aplica uma visibilidade diferente aos contentParagraph de acordo com a classe do elemento pai.

E tem uma que requer menos esforço ainda. Faça os contentParagraph serem do mesmo tamanho que os content. Daí utilize o evento mouseenter e mouseleave no contentParagraph, e não no content ;) a partir do contentParagraph, você pode obter o content exclusivo dele utilizando a função parent do jQuery. Assim:

var content = $(this).parent();

Isso é muito mais eficiente do que o find. Boa sorte aí!

1
  • opa, valeu, irei tentar todas essas alternativas e vou ver qual que mais se adequa às minhas necessidades. Agora, eu tenho outro problema o qual gostaria de resolver neste código. Toda vez que passo o mouse na div content ele armazena as chamadas do mouseenter e fica indo e voltando varias vezes, teria alguma maneira de arrumar isso?
    – user8278
    Commented 30/08/2014 às 23:49
3

Deixo uma nova resposta, já depois de ter uma resposta aceite, pois isto é possivel só com CSS. E quanto menos jQuery melhor.

Pode usar transitions no CSS, e acrescentar:

transition: width .8s, opacity .5s;  // no .content com transições de 0,8 e 0,5 segundos

opacity: 0;
transition: opacity 1s; // no .contentParagraph com uma transição de 1 segundo

E depois acrescentar novo CSS para defenir como se deve comportar o .content e o .contentParagraph quando o .content tiver um :hover

/* novo CSS */
 .content:hover {
    width: 900px;
    opacity: 0.65;
}
.content:hover .contentParagraph {
    opacity: 1;
}

Demo: http://jsfiddle.net/Sergio_fiddle/qh2hk1wm/

5
  • Gostei da dica. Só funciona com navegadores atuais não é? Commented 31/08/2014 às 7:35
  • 1
    @PapaCharlie, atuais e alguns "antigos" também: caniuse.com/#feat=css-transitions
    – Sergio
    Commented 31/08/2014 às 7:47
  • 1
    Muito interessante isso, quando consolidado vai ser uma ótima alternativa para dependência de JS para animações. Commented 31/08/2014 às 8:01
  • 1
    +1, especialmente por causa de "isto é possivel só com CSS. E quanto menos jQuery melhor", e acho que a resposta aceita deveria ser esta :) Commented 31/08/2014 às 14:16
  • Ficou realmente legal, era justamente o que eu queria fazer. @Renan Irei aceitar a primeira resposta pois foi ela que sanou a dúvida principal.
    – user8278
    Commented 31/08/2014 às 14:46
2

Fiz um exemplo no JSFiddle e completei as outras div's com texto para ilustrar.

// troque pela linha abaixo
$('.contentParagraph').fadeTo('fast',0)

// Para ele aplicar o efeito no elemento interno 'p'
$(this).children("p").fadeTo('fast',1)

Você também pode alterar o seguinte.

No script, remover:

$('.contentParagraph').hide()

No CSS, aplicar estilo:

.contentParagraph{display:none}

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