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

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>

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'>

I have found the problem: Don't use CDN (this is causing the problem!), instead save the jquery file locally on your server and then the problem is away.

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.

For those who have a custom jQuery UI build (bower for ex.), add the effects core located in ..\jquery-ui\ui\effect.js.

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.

use the latest one for bootstrap 4 and above, this won't affect your UI

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

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.

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.