The Greensock hotel fires all animations instead of just one

Question

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

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

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

Follow the code, the .plus is the animated "read more" textile 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"});    
})
}

Answer 1

You do not have your Mac present in the question, which makes it difficult to illustrate the solution. Similarly you make use of the plus but without instantiating the same anywhere in the code that is part of the question.

That said, I assume you are somehow assigning the elements with the CSS class .plus to the variable plus and when you call TweenLite, the same has an impact on all the elements with that class present on the page.

One way around this is to:

...
// 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 the documentation ^(English) we know:

The first Parameter we feed the Tween is the target (the Object Whose properties you want to Tween)

That translated:

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

And it can be seen in the documentation that the first parameter is an DOM object:

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