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>

score 158 · Accepted Answer · answered Sep 25 '12 at 22:59

158

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.

answered Sep 25 '12 at 22:59

I Hate Lazy

47,415
13
86
77

11

I am including this file from a CDN: `` Is it this one ? Or shall i include another file? – Malloc Sep 25 '12 at 23:02
@Malloc you need to include jquery and after it jquery-ui – NoNameZ Sep 25 '12 at 23:05
1

Yes i did, but always got same issue, please have a look on my edit :) – Malloc Sep 25 '12 at 23:07
2

Oh i fixed it, i was including both jQuery-min and jQuery on the same file, that was my mistake. Thanx for your help :))) – Malloc Sep 25 '12 at 23:13
3

what do you mean? how did you fix it? – max4ever Oct 10 '12 at 12:48
1

Yeah, I'm still getting the same error, but I've only included one jquery source file. – Costa Michailidis Mar 29 '13 at 00:42
Costa - had same problem, fixed it by including earlier jquery version, mutiselect doesn't seem to have 1.9 support – Ben Green Apr 24 '13 at 13:46
Custom build you own needs jquery-ui here: `http://jqueryui.com/download/#!`, dont forget to download: jQuery Easing Plugin - `http://www.jqueryrain.com/?HqpgDqbN` – Jadeye Aug 30 '16 at 11:25

score 21 · Answer 2 · answered Dec 22 '14 at 08:15

21

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

answered Dec 22 '14 at 08:15

Tim Vermaelen

6,869
1
25
39

3

I only had to use a single effect, so I was able to make due with just `import "jquery-ui/ui/effects/effect-slide"`. Thanks for the tip, Tim! – aried3r May 07 '19 at 11:16

score 15 · Answer 3 · answered Oct 12 '16 at 11:38

15

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

answered Oct 12 '16 at 11:38

Manju

151
1
4

score 12 · Answer 4 · answered Nov 12 '12 at 16:01

12

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.

answered Nov 12 '12 at 16:01

ericopter

121
2

score 5 · Answer 5 · edited Feb 04 '16 at 05:53

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.

score 4 · Answer 6 · answered Sep 25 '16 at 23:12

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.

score 3 · Answer 7 · answered May 03 '20 at 19:41

3

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.

answered May 03 '20 at 19:41

Farid Chowdhury

2,766
1
26
21

score 1 · Answer 8 · answered Jan 28 '20 at 15:40

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

score 1 · Answer 9 · edited Sep 11 '21 at 12:45

1

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

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

edited Sep 11 '21 at 12:45

Suraj Rao

29,388
11
94
103

answered Sep 11 '21 at 12:43

opajaap

11
1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/29798450) – SimpleCoder Sep 11 '21 at 20:20

score 0 · Answer 10 · edited Jun 29 '19 at 11:00

0

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.

edited Jun 29 '19 at 11:00

A J

3,970
14
38
53

answered Jun 29 '19 at 10:54

Pasodoble

1

score 0 · Answer 11 · answered Sep 03 '20 at 14:26

0

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

answered Sep 03 '20 at 14:26

salman ifrahim

371
3
8

score 0 · Answer 12 · answered Dec 05 '22 at 19:35

0

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.

answered Dec 05 '22 at 19:35

Prekwood

1

But this is not related in any way with the question (which, btw, got a highly upvoted and accepted answers. So this is not rhetorical: we know for sure that your answer is off topic) – chrslg Dec 11 '22 at 10:06

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

12 Answers12

Linked

Related