4

Tenho uma lista com várias imagens, e quando com o hover, acontecem 4 animações, um overlay, outro bg de overlay, a legenda da imagem aparece e um outro texto de "leia mais" também aparece.

Todas as animações eu fiz com jQuery, exceto o outro texto que tem esse "leia mais" que fiz com o GreenSock. O que acontece é que o hover, em qualquer uma das imagens, ativa a animação do GreenSock em todas as outras, isso não acontece com as animações em jQuery porque eu usei o this.

Como eu faria para a animação só acontecer na imagem que eu dou o hover?

Segue o código, o .plus é o textinho de "leia mais" animado que não está funcionando.

function animatePublications() {

$( ".menu-publications li" ).hover(function() {
    // var self = $(this);
    $( ".overlay", this).stop().animate({'opacity' : 1}, 400);
    $( ".overlay-plus", this).stop().animate({'bottom': '0', 'opacity' : 1}, 400);
    $( ".caption", this).css( "color", "#ffffff" ).stop().animate({'top': '-175px'}, 400);
    TweenLite.to(plus, 1, {bottom:"24px", ease:Bounce.easeOut});
}, function() {
    $( ".overlay", this).stop().animate({'opacity' : 0}, 400);
    $( ".overlay-plus", this).stop().animate({'bottom': '-148px', 'opacity' : 0}, 400);        
    $( ".caption", this).css( "color", "#737373" ).stop().animate({'top': '0'}, 400);  
    // $( ".plus").stop().animate({'bottom': '-105px'}, 400);
    TweenLite.to(plus, 0.5, {bottom:"-105px"});    
})
}

1 Resposta 1

1

Não tens a tua markup presente na pergunta, o que dificulta a ilustração da solução. De igual forma fazes uso do plus mas sem instanciares o mesmo em lado nenhum no código que faz parte da pergunta.

Dito isto, assumo que de alguma forma está a atribuir os elementos com a classe de CSS .plus à variável plus e ao chamares o TweenLite, o mesmo tem incidência sobre todos os elementos com a referida classe presentes na página.

Uma forma de contornar esta questão é:

...
// apanhar o elemento que diz respeito ao local onde estamos
// estou a assumir que é um filho do selector usado para o .hover()
var myPlus = $(this).find('.plus');

// passar o mesmo para o TweenLite para que a animação fica limitada a ele
TweenLite.to(myPlus, 1, {bottom:"24px", ease:Bounce.easeOut});
...

De acordo com a documentação (Inglês) sabemos:

The first parameter we feed the tween is the target (the object whose properties you want to tween)

Que traduzido:

O primeiro parâmetro que passamos ao tween é o alvo (o objecto cujas propriedades queremos tween)

E pode ser visto na documentação que o primeiro parâmetro é um objecto deve do DOM:

var photo = document.getElementById("photo"); //or use jQuery's $("#photo")
TweenLite.to(photo, 1.5, {width:100});

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 .