"TypeError: jQuery.easing[this.easing] is not a function" 在 jQuery 1.9.1 中

Question

几个月来我第一次升级了jQuery。我现在在:

• jquery-1.9.1.js
• jquery-ui-1.10.2.custom.js(使用ThemeRoller，包括所有组件，包括Effects Core，在其描述中提到了easing)

我还升级到最新版本的jquery。Multiselect和jquery.multiselect.filter插件。当我试图关闭其中一个多选择菜单时，我得到这个错误:

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

请注意，虽然我使用multiselect插件时，错误发生，实际的错误是在主jQuery文件。代码是:

/*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*/ }

我忘记更新某个文件了吗?在谷歌上搜索一下，其他有同样抱怨的人似乎都在试图使用某种额外的缓解插件，但我没有。

Answer 1

首次升级到jQuery 1.9时，此错误可能会在整个站点的各种动画中发生。+因为缓动效果的名字已经改变了!!

见http://api.jqueryui.com/easings/jQueryUI.com网站上的旧示例没有更新，导致人们认为旧的动画示例名称是正确的。

示例:手风琴面板的"bounceslide"动画现在是一个接近版本的东西叫做'easeOutBounce'。在撰写本文时，字符串"bounceslide"仍然在网站的示例中:http://api.jqueryui.com/accordion/option-animate。

我只意识到动画名称已经改变后，在动画类型中提到的超链接，并尝试在我的代码中的新名称。

Answer 2

Include:

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

Answer 3

第二个参数无效

如果这能帮助别人像我一样遇到这个问题，我将添加另一个可能的解决方案。我的错误是由于我对fadeIn函数的第二个参数不是在动画完成时执行的"回调"函数。如果第二个参数不是一个函数，jQuery希望它是一种易于使用的类型。我的第二个参数错误地是一个对象——我以为它是一个函数。

对我来说，

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

变成:

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

注意，传递给匿名enter函数的参数的变化。重要的是，在我的例子中，这些变量是AngularJS注入，所以它们的顺序很重要，而不是它们的名字。

Answer 4

当错误地使用.show(duration, easing)等效果方法时，参数反转会引起错误，因为它会导致调用无效的easing。

正确的表记是.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

感谢@Legionar的评论，升级到他建议的1.13版本对我有用:

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

UPDATE在这个版本中outerHeight()函数的使用导致小部件定位错误，因为它错过了css位置top，将第573行更改为以下将修复这个问题:

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

Answer 6

这绝对与版本无关。

我有这样的代码，并得到相同的错误:

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

问题是我传递给toggle函数的参数。所以我改成:

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

所以在调用jQuery-api时要注意传递给函数的参数。