Simplifying similar functions using a hover state with different div content

Question

I'm trying to hover over over the img then use Greensock Tweenmax on hover to control the speed and opacity of the text within the span. The opacity will change on mouseover and mouseout.

The problem is that I'm having to repeat the same exact same effect on several div's and it's becoming repetitive. Each one will be unique to the image being hovered. I don't want them all to appear at the same time when I hover over one div. I could give them all the same class then use .hover but then that would activate all of them instead of individually.

They are only to appear respective to that particular div being hovered. It works just fine, but I would like to simplify it since I will be doing this to about 20 different divs.

I need some help simplifying the code below. It works just fine, but maybe there is an easier way.

<a href="#click-for-modal" data-toggle="modal">
 <div class="test">
 <img src="img/image.png"><span>Here is some text</span>
 </div>
</a>
<a href="#click-for-another-modal" data-toggle="modal">
 <div class="testx">
 <img src="img/image.png"><span>Here is some other text</span>
 </div>
</a>
/* tweenmax hover animations */
 $('.test img').hover(
 function(){
 /*mouseover function*/
 TweenLite.to(".test span", 1.5, {opacity:1});
 }, 
 function(){
 /*mouseout function*/
 TweenLite.to(".test span", 1.5, {opacity:0});
 });
 $('.testx img').hover(
 function(){
 /*mouseover function*/
 TweenLite.to(".testx span", 1.5, {opacity:1});
 }, 
 function(){
 /*mouseout function*/
 TweenLite.to(".testx span", 1.5, {opacity:0});
 });
 $('.testxy img').hover(
 function(){
 /*mouseover function*/
 TweenLite.to(".testxy span", 1.5, {opacity:1});
 }, 
 function(){
 /*mouseout function*/
 TweenLite.to(".testxy span", 1.5, {opacity:0});
 });
 $('.testxyz img').hover(
 function(){
 /*mouseover function*/
 TweenLite.to(".testxyz span", 1.5, {opacity:1});
 }, 
 function(){
 /*mouseout function*/
 TweenLite.to(".testxyz span", 1.5, {opacity:0});
 });

• Simon Forsberg: Welcome to Code Review! To make life easier for reviewers, please add sufficient context to your question. The more you tell us about what your code does and what the purpose of doing that is, the easier it will be for reviewers to help you. See also this meta question
• rds: Just use closures.
• user1222186: Thanks @SimonAndréForsberg I'll review the link and update the answer.

Answer 1

The recommended way is to use event delegation:

$('.test, .testx, .testxy, .testxyz')
 .on('mouseover', 'img', function (e) {
 TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:1});
 }).on('mouseout', 'img', function (e) {
 TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:0});
 });

This will add the mouseover and mouseout events to all img tags within your parent elements. When the event is fired e.delegateTarget will be the parent element, so we can easily search for the span.

• RoToRa: I believe this would assume that the spans are inside the img.
• Jivings: @RoToRa Whoops, you are right. It should be using the delegateTarget.
• megawac: This won't handle the cases where there are 2+ .testx and the user clicks one
• Jivings: @megawac The original code posted also doesn't cater for that.
• user1222186: @Jivings Thank you for your answer, let me update my question as per Simons request to further clarify my question

Answer 2

Considering you are assigning the same functionality to all of those elements, you should assign them all the same class, eg:

<div class="test my-hover">...</div>
<div class="testx my-hover">...</div>
<div class="testxy my-hover">...</div>
<!-- etc. -->

and then use $(".my-hover").

(BTW, my-hover is just an example, and is probably a bad choice for a class name. Use a class name that expresses why they get that hover effect, not that they get a hover effect.)

• user1222186: Thanks for you input, but this solution wouldn't work because then the hover would trigger all the events at the same time. As opposed to individually.
• RoToRa: @user1222186 No, it wouldn't. The class name just defines which elements the event handlers apply to. The use of this/event.target (or in the case of Jivings solution event.delegateTarget) inside the handler decides which elements the effects are applied to.