Adding easing on transition throws jquery error

Question

I want to add an easing style into my smooth scrolling code, but whenever I do it throws a constantly increasing jquery error in the console.

$('#slider-scrollDown').click(function() {
    $('html, body').animate({
        scrollTop: $("#scrollTo-container").offset().top
    }, 2000);
});

This is what I have, and I'm trying to add an easing like this:

$('#slider-scrollDown').click(function() {
    $('html, body').animate({
        scrollTop: $("#scrollTo-container").offset().top
    }, 2000, 'easeInOut');
});

The errors I receive in the console are:

Uncaught TypeError: n.easing[this.easing] is not a function

Which displays once, and then another below it with an increasing number in red, which doesn't stop.

Okay, but that's not really the kind of easing I want to use... — Lee, Jul 14 '16 at 10:54
please check this answer http://stackoverflow.com/questions/12592279/typeerror-p-easingthis-easing-is-not-a-function — Ruben Karapetyan, Jul 14 '16 at 10:58

score 0 · Answer 1 · answered Jul 14 '16 at 10:46

0

It's because easeInOut does not exist... Have a look on this page ;) https://api.jqueryui.com/easings/

answered Jul 14 '16 at 10:46

R. Foubert

633
4
8

I get the same error if I use one of the listed examples, such as `easeInOutBack` – Lee Jul 14 '16 at 10:49
mhhhh... did you try to debug ? If you add a breakpoint where n.easing[this.easing] is done... Which properties are in the n.easing object ? – R. Foubert Jul 14 '16 at 10:51
got jquery **ui** referenced? – BenG Jul 14 '16 at 10:53
@BenG Yes, jQuery UI is being loaded and running – Lee Jul 14 '16 at 10:55
so what do you have in n.easing ? – R. Foubert Jul 14 '16 at 10:56

score 0 · Answer 2 · answered Jul 14 '16 at 10:59

0

Hmm I overlooked something when trying to load easing. I didn't mention that I'm using Wordpress, and I've just discovered that an extra function call is needed to get the jQuery easing functions.

Simply adding wp_enqueue_script ( 'jquery-effects-core' ); to my list of loads solved the issue.

Thanks everyone.

answered Jul 14 '16 at 10:59

Lee

4,187
6
25
71

Alex, why the downvote? Don't be down just because I downvoted your answer, it wasn't helpful! – Lee Jul 14 '16 at 11:03

Adding easing on transition throws jquery error

2 Answers2