Question

I’m new to jQuery but I managed to get something working. The only thing I can’t really figure out is how to make a function of this script so I can reuse it on several divs.

The idea is to have a tumbnail, when you hover the tumbnail a infolayer will fade in over the tumbnail. When your mouse leaves the tumbnail, the info layer will disappear again.

I have the following code:

$('#hover').mouseenter(function() {
    $('#1').animate({ opacity: 'show' }, 300);

    }).mouseleave(function() {
    $('#1').animate({ opacity: 'hide' }, 800);
});

And the html:

<div class="work_tumb" id="hover">
       <div class="work_overlay" id="1">This is the info overlay</div>
</div>

This code works perfectly. Now I just want to make a function from this so it’s reusable. Can you guys help me out with this??

Answer 1

I am assuming that you are not looking for a solution to bind the event again as a function, but make it able to work on multiple div with similar structure.

jQuery can work on a collection of HTML elements / DOM objects. So there is no need to create a function to reuse it.

Assuming the HTML look like the following code

<div class="work_tumb" id="hover1">
    <div class="work_overlay" id="a">This is the info overlay</div>
</div>
<div class="work_tumb" id="hover2">
    <div class="work_overlay" id="b">This is the info overlay</div>
</div>
<div class="work_tumb" id="hover3">
    <div class="work_overlay" id="c">This is the info overlay</div>
</div>

work_tumb is where you want to implement the mouseenter & mouseleave event.
and work_overlay is where you want to animate.

You can use the following code to do it:

$('div.work_tumb').mouseenter(function() {
    $(this).children('div.work_overlay').animate({ opacity: 'show' }, 300);
}).mouseleave(function() {
    $(this).children('div.work_overlay').animate({ opacity: 'hide' }, 800);

});

‘div.work_tumb’ will select all div with class “work_tumb” and you work on all of them at the same time.

The this keyword refer to div with class “work_tumb’ and then find it’s children where class equals to “work_overlay” and perform the animation.

Hope I understand your need correctly and able to help.