CODEWITHSUNDEEP
jqueryfunction
Ramy Alayane
Ramy Alayane

Reputation: 94

How to make a function that doesn't take the element as a parameter like fadeIn

Hey guys I want to make a function like let's say : fadeIn() The fadeIn() function doesn't take any parameters but it automatically knows what element I'm talking about. Example: How I know how to make a function:

function make100HW(el){
  $(el).animate({height:"100px",width:"100px"},400);
}

make100HW("#something");

//what I want is something like
// $("#something").make100HW(); without putting the element inside the parameters.
//just like $("#something").fadeIn();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="something" style="background:red">
</div>

Upvotes: 2

Views: 27

Answers (3)

Rstilora
Rstilora

Reputation: 21

before set element height and width 100px you put the code in css 

#something{opacity:0}

function make100HW(el){
  $(el).animate({"height":"100px","width":"100px","opacity":"1"},400);
}

also you do this

function make100HW(el){
  $(el).css({"opacity":"0"}}).animate({"height":"100px","width":"100px","opacity":"1"},400);
}

Upvotes: -1

T.J. Crowder
T.J. Crowder

Reputation: 1075139

To make a jQuery plugin, you add the function to the jQuery.fn object (which is usually also available via $.fn, but a well-written plugin shouldn't assume $ refers to jQuery). Within the function, this will be the jQuery set on which the plugin was called (not an individual DOM element as it is in event handler callbacks and such).

Often, the plugin will be complex enough to need ancillary functions. For that reason and because you shouldn't rely in $, it's common to see the plugin code wrapped in an IIFE accepting $ as a parameter and passing in jQuery:

(function($) {
    // Code using $ here, which is fine even though noConflict
    // may have been used in the global context...
})(jQuery);

So:

// Your plugin code
(function($) {
    $.fn.make100HW = function make100HW() {
        // 1. Use `this`, which is hte current jQuery set
        // 2. Return `this`, for chaining (which animate does)
        return this.animate({height:"100px",width:"100px"},400);
    };
})(jQuery);

// Using it
$("#something").make100HW();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="something" style="background:red">
</div>

Upvotes: 2

Martijn
Martijn

Reputation: 16123

By creating a jQuery function:

$.fn.make100HW = function() {
  // You can now use $(this) as the selected element(s):
  $(this).animate({height:"100px",width:"100px"},400);
};

That you could've Googled very easily, or find it in the jQuery docs. The reason I responded is to suggest better naming:
Your function is now hardcoded, you can only do one thing with it, which is kind of a waste of functions. With a small tweak and better naming, you can use it for any size:

$.fn.makeSquare = function(size) {
  const useSize = size || 100;
  $(this).animate({height: useSize,width: useSize},400);
};

Upvotes: 0

Related Questions