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í!