CODEWITHSUNDEEP
jquery
Xeon43
Xeon43

Reputation: 11

jQuery function

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

Upvotes: 0

Views: 452

Answers (6)

airmanx86
airmanx86

Reputation: 1002

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.

Upvotes: 1

RobertPitt
RobertPitt

Reputation: 57268

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 ();

Upvotes: 5

Nick Craver
Nick Craver

Reputation: 630607

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 :)

Upvotes: 1

Douglas
Douglas

Reputation: 37781

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.

Upvotes: 1

Pekka
Pekka

Reputation: 449783

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.

Upvotes: 1

Chris
Chris

Reputation: 27627

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.

Upvotes: 1

Related Questions