How to package jQuery function(s) into a custom function or variable?

Question

$("#mydiv").hover(function() {
    $(".class").stop(true, true).fadeIn(100);
}, function() {
    $(".class").stop(true, true).fadeOut(100);
});

Suppose I have a snippet like something above. I have a lot similar hover functions need to be bound. How can I write a custom function to achieve this?

Something like:

$("#mydiv").myHover(".class", 100);

George · Accepted Answer · 2014-10-14 08:57:04Z

3

You would write what's known as a jQuery plugin:

$.fn.myHover = function(s, d){
    return this.each(function(){
        var $this = $(this), $selected = $(s);
        $this.hover(function(){
            $selected.stop(true, true).fadeIn(d);
        }, function(){
            $selected.stop(true, true).fadeOut(d);
        })
    });
}

JSFiddle

You can learn all about writing them yourself here: http://learn.jquery.com/plugins/

edited Oct 14, 2014 at 8:57

answered Oct 14, 2014 at 8:51

George

36.9k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SPG Over a year ago

yes, PLUGIN! I do not know how to ask this question. The keyword PLUGIN save me! Thank you!

George Over a year ago

I'm glad you're saved (:

Collectives™ on Stack Overflow

How to package jQuery function(s) into a custom function or variable?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related