“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,

Answer 1

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.

Answer 2

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 3

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 4

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 5

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 6

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