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>

Answers:

Answer

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

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

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

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.

Answer

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

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

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

Answer

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

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.