“TypeError: jQuery.easing[this.easing] is not a function” in jQuery 1.9.1

Question

For the first time in too many months (blush), I upgraded my jQuery stuff. I'm now on:

• jquery-1.9.1.js
• jquery-ui-1.10.2.custom.js (used ThemeRoller, and included all components, including the Effects Core, which mentions easing in its description)

I also upgraded to the most recent versions of jquery.multiselect and jquery.multiselect.filter plugins. When I try to close one of the multiselect menus, I get this error:

TypeError: jQuery.easing[this.easing] is not a function
jquery-1.9.1.js (line 9033)

Note that although I'm using the multiselect plugin when the error occurs, the actual error is in the main jQuery file. The code is:

/*9031*/ if ( this.options.duration ) {
/*9032*/   this.pos = eased = jQuery.easing[ this.easing ](
/*9033*/     percent, this.options.duration * percent, 0, 1, this.options.duration
/*9034*/   );
/*9035*/ }

Did I forget to update some file? Googling about it, others with the same complaint seem to all be trying to use some sort of additional easing plugin, but I'm not.

Answer 1

This error could happen in various animations throughout your site when first upgrading to jQuery 1.9.+ because the easing effect names have changed !!!

See http://api.jqueryui.com/easings/ What doesn't help is that the old examples in the jQueryUI.com site havent been updated, leading folks to think that the old animate example names are correct.

Example: accordion panels "bounceslide" animation is now a close version of something called ' easeOutBounce '. The string "bounceslide" is still in the sites' example as of this writing: http://api.jqueryui.com/accordion/#option-animate .

I only realised the animation names had changed after following the hyperlink mentioned in the animate types and trying the new names out within my code.

Answer 2

Include:

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>    

Note: update the jquery UI version if needed.

Answer 3

Invalid 2nd Argument Issue

In case this helps someone stumbling upon this question like I did when I got this error, I'll add another possible solution. My error was due to the fact that my 2nd argument to the fadeIn function was not a "callback" function to be executed on completion of the animation. If the 2nd argument is not a function, jQuery expects it to be a type of easing to use. My 2nd argument was mistakenly an object - I thought it was a function .

So, for me,

return {
  enter: function(element,classes,done){ //classes variable incorrectly added, making done an object
    element.fadeIn(1000,done);
  }
};

became:

return {
  enter: function(element,done){ //remove classes variable as wasn't right for this situation - done is now a function
    element.fadeIn(1000,done);
  }
};

Note, the change in arguments passed into my anonymous enter function. Importantly in my case, these variables were AngularJS injections, so the order they were in was important, not so much their name.

Answer 4

The error can be provoked by argument inversion when using an effect method wrongly like .show(duration, easing) as it leads to a call of an invalid easing.

The correct notation is .show(easing, duration) https://api.jquery.com/show/

 var duration = 'slow', easing = 'linear'; $("#correct").click(function() { $("p").show(duration, easing); }); $("#error").click(function() { $("p").show(easing, duration); // fails -> see error in console });

 p { background: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> $("p").show( <button id="correct">duration, easing</button> <button id="error">easing, duration -> ERROR</button> ) <p style="display: none">Hello</p>

Answer 5

Thanks to @Legionar's comment, upgrade to his suggested version 1.13 worked for me:

https://github.com/ehynds/jquery-ui-multiselect-widget/archive/1.13.zip

UPDATE in this version the usage of outerHeight() function causes the widget to position wrong because it misses css position top , changing line#573 to following will get the issue fixed:

top: pos.top + button.outerHeight(false),

Answer 6

This has absolutely nothing to do with versions.

I had this code and got the same error:

$("#consoleBtn").click(function(){
    $("#consolePanel").toggle("display", {  from : { display: "block" }, to : { display: "none" } });
});

The problem was the arguments I passed to the toggle function. So I changed to:

$("#consoleBtn").click(function(){
    $("#consolePanel").toggle();
});

So be mindful of the arguments passed to your function when calling jQuery-api. Hope this helps.