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"});
})
}