TypeError: p.easing[this.easing] is not a function

Question

When trying to show a div element with jQuery, i got this error:

[23:50:35.971] TypeError: p.easing[this.easing] is not a function @ file:///D:/html5%20puzzle/jquery.js:2

The relevant function is this:

function showWithAnimation(){                  
  console.log('animation called');
  $('#popup').show();
  $("#popup").css({"top": "30%", "left": "30%"})
             .animate({top:(($(window).height()/2)-($('#popup')
             .outerHeight()/2))-70}, 1000, 'easeOutBounce')
             .show();
}

The function is responsible of showing the div with a bounce animation, however, the div is shown but without bounce effect.

EDIT:

I am including jQuery and jQueryUI libraries from a CDN like this (In order):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'>
</script>

Answer 1

You need to include jQueryUI for the extended easing options.

I think there may be an option to only include the easing in the download, or at least just the base library plus easing.

Answer 2

对于那些拥有自定义 jQuery UI 构建（例如 bower）的人，添加位于..\\jquery-ui\\ui\\effect.js的效果核心。

Answer 3

Including this worked for me.

Please include the line mentioned below in the section.

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'>

Answer 4

Jquery easing plugin renamed their effect function names from version 1.2 on. If you have some javascript depending on easing and it is not calling the right effect name it will throw this error.

Answer 5

I got this error today whilst trying to initiate a slide effect on a div. Thanks to the answer from 'I Hate Lazy' above (which I've upvoted), I went looking for a custom jQuery UI script, and you can in fact build your own file directly on the jQuery ui website http://jqueryui.com/download/ . All you have to do is mark the effect(s) that you're looking for and then download.

I was looking for the slide effect. So I first unchecked all the checkboxes, then clicked on the 'slide effect' checkbox and the page automatically then checks those other components necessary to make the slide effect work. Very simple.

easeOutBounce is an easing effect, for which you'll need to check the 'Effects Core' checkbox.

Answer 6

If you're using Bootstrap it's also possible that Bootstrap's jQuery, if included below your jQuery script tag, is overwriting your jQuery script tag with another version. Including jQuery's own CDN and deleting the jQuery script tag that Bootstrap provides was the only thing that worked for me.

Answer 7

Importing jquery.easing cdn worked for me.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

You can add this bottom of the webpage.

Answer 8

For anyone going through this error and you've tried updating versions and making sure effects core is present etc and still scratching your head. Check the documentation for animate() and other syntax.

All I did was write "Linear" instead of "linear" and got the [this.easing] is not a function

$("#main").animate({ scrollLeft: '187px'}, 'slow', 'Linear'); //bad

$("#main").animate({ scrollLeft: '187px'}, 'slow', 'linear'); //good

Answer 9

我发现了问题：不要使用 CDN（这是导致问题的原因！），而是将 jquery 文件保存在您的服务器本地，然后问题就消失了。

Answer 10

使用最新的 bootstrap 4 及以上版本，这不会影响您的 UI

Answer 11

I discovered a very strange thing, but important to know: When you installed jQuery ui (1.12.1) a lot of easings work, eg:

jQuery('#my-elm').animate({marginLeft:500},1000,'linear');
jQuery('#my-elm').animate({marginLeft:500},1000,'easeOutBounce');

works, but the default:

jQuery('#my-elm').animate({marginLeft:500},1000,'swipe');

generates very many errors

Answer 12

In my case it was an error in the js code. Once i fixed it the error went away. The error was something like this.

$("#id").removeClass("class-1","class-2","class-3");

Apparently this isn't how to remove multiple classes at a time.