Easing parameter in jQuery function automatically identified?

Question

The answer to How to generate a simple popup using jQuery presents the following short jsFiddle http://jsfiddle.net/SRw67/. In the jsFiddle you find:

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

where the function slideFadeToggle is defined as:

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

In the jQuery documentation I found:

easing A string indicating which easing function to use for the transition.

The function slideFadeToggle has 2 parameters but in the code only a function is passed. Does jQuery automatically identify that the parameter is a function and thus skips the easing parameter and passes the function as the callback? Or why is this working, when obviously the easing parameter is missing?

Further, why is the author using $.fn.slideFadeToggle =..?

I found here What does jQuery.fn mean? that this is a shortcut for $.prototype.slideFadeToggle but it does not make any sense to me. Why is this useful here?

score 1 · Answer 1 · answered Feb 20 '16 at 00:35

If you look at the documentation of .animate() you'll see that the easing argument is optional. The specification is:

.animate( properties [, duration ] [, easing ] [, complete ] )

The way it determines if you provided this argument is by checking the datatype of the third argument -- if it's a string, it's easing, but if it's a function it means you left out the easing argument (so it will use the default), and this is the complete argument. Many jQuery methods work like this; as long as the types of the optional arguments are all different, it can figure out which ones you left out.

Since slideFadeToggle() simply passes on its arguments, you automatically get the same ability to leave out easing.

score 1 · Accepted Answer · answered Feb 20 '16 at 00:45

1

Does jQuery automatically identify that the parameter is a function and thus skips the easing parameter and passes the function as the callback?

Yes, that's exactly what happens.

You can see by reading the jQuery source that animate is not very particular about having both formal arguments passed to it. In the current version this is done indirectly: those arguments are used to construct an options object by calling jQuery.Speed, which in turn inspects the types of its arguments to determine which one corresponds to what (undefined is also implicitly handled by the boolean checks).

The same behavior is also seen on lots of other jQuery methods; e.g. the ubiquitous on recognizes four arguments, of which the second and third are optional.

answered Feb 20 '16 at 00:45

Jon

428,835
81
738
806

Does it mean that in the function **slideFadeToggle** has callback as none and the function is saved in **easing**, and then I call animate with **animat(..'fast',function(..),none)** and the animate function detects autmatically that a function is passed? Thus, the word **easing** is not a special keyword or anything and I could rewrite all oocurences wth **easing* into **earing** for example? – Adam Feb 20 '16 at 01:03
@Adam yes and yes. "easing" is just the name of the formal parameter of the function. You could call it whatever you want and nothing at all would change. The only things that matter are number and order of arguments (as always) plus the special logic that's embedded in jQuery. – Jon Feb 20 '16 at 01:15
If I would only pass a string as first optional paramenter, then the method animate would probably think its duration, right? Even if I pass "swing"? – Adam Feb 20 '16 at 08:50

score 0 · Answer 3 · answered Feb 20 '16 at 00:28

0

The default easing is "swing" , see .animate()

answered Feb 20 '16 at 00:28

guest271314

1
15
104
177

Easing parameter in jQuery function automatically identified?

3 Answers3