The hover on GreenSock fires all animations instead of just one

Navigation
4

I have a list with several images, and when with hover , there are 4 animations, one overlay , another bg of overlay , the image caption appears and another "read more" text also appears.

All the animations I've done with jQuery, except for the other text that has this "read more" I made with GreenSock. What happens is that hover in any of the images activates the GreenSock animation in all others, this does not happen with the animations in jQuery because I used this .

How would I make the animation only happen in the image I give hover ?

Follow the code, .plus is the animated "read more" widget that is not working. 

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"});    
})
}
    
asked by anonymous 24.02.2014 / 20:16

1 answer

1

You do not have your markup present in the question, which makes it difficult to illustrate the solution. Likewise, you use plus but you do not instantiate the same anywhere in the code that is part of the question.

That said, I assume that somehow you are assigning the elements with the CSS class .plus to the variable plus and when calling the TweenLite , it has incidence on all the elements with the said class present on the page.

One way around this is: 

...
// 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});
...

According to documentation (English) we know:

  

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

What translated:

  

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

And it can be seen in the documentation that the first parameter is a must object of the DOM: 

var photo = document.getElementById("photo"); //or use jQuery's $("#photo")
TweenLite.to(photo, 1.5, {width:100});
    
24.02.2014 / 23:14
How to find the server port that responded to the request How to use HTML Agility pack?