jQuery function

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??

• adardesign: to use a id="1" is invalid, see: stackoverflow.com/questions/70579/…

Answer 1

I would create a small function like so

(function($){
 $.fn.MyFader = function()
 {
 $(this).hover(in,out);
 function in()
 {
 $(this).animate({ opacity: 'show' }, 300);
 }
 function out()
 {
 $(this).animate({ opacity: 'hide' }, 800);
 }
 return this;
 }
})($ || jQuery)

and then you will be able to use like so:

$("#1").MyFader();
$("#3").MyFader();
$(".someClass").MyFader ();

• Bernhard Hofmann: Excellent answer. So good I want to up-vote it twice at least. (a) actually answers the question of how to create a reusable function, and (b) shows how a plug-in is written. Other answers avoided creating a function/plug-in.

Answer 2

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.

• Xeon43: Thanks man! This was exactly what I needed!! Now all my tumbs get the right overlay with just piece of code.
• airmanx86: Thanks Xeon43, I agree with Nick Craver and his comments. You should try the hover() method and see if you can make the code better.

Answer 3

There is nothing special about jquery code. You should be able to just wrap it in a function and it will work. eg:

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

Edit: Though it occurs to me that you may want to make it apply to more HTML elements. If this is the case then you could always pass in a couple of string variables for the selectors or pass in one selector and derive the second from the first in some way.

• belugabob: This does wrap the code in a function, but it doesn't make it reusable (Although you do acknowledge this in your post edit.
• Chris: Yeah, the question wasn't as clear as it could have been and I didn't really think too hard until after I hit submit and thought "Why would somebody do that" and realised what the question probably meant... :)

Answer 4

If you want to assign the callback to multiple divs, you don't need to put it into a function. Just specify a selector that applies to all elements. In your case, for example:

$('.work_tumb').mouseenter(function() { ... }

to assign the event to all elements of the class .work_tumb.

You'll have to address the #1 element differently then, though, as IDs must be unique within a document. It may be something like

 $('#'+this.id+' .class1').animate({ opacity: 'show' }, 300);

to address an element with the class class1 inside the element in question.

Answer 5

The simplest way to make it reusable is to use classes instead of ids, this way you can reuse it on any other elements simply by adding the correct class names:

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

Then:

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

If you end up with quite complex behaviour, you might think about writing your own jQuery plugin.

Answer 6

2 Suggestions, use .hover() instead for a bit shorter code, and a class, like this:

$('.hover').hover(function() {
 $(this).children(".work_overlay").animate({ opacity: 'show' }, 300); 
}, function() {
 $(this).children(".work_overlay").animate({ opacity: 'hide' }, 800);
});

You can just use class="hover", or class="work_thumb hover" in this case. This approach uses .children() to find the #1 relatively, instead of by a specific ID. There are many tree-traversal functions to move around like this :)