jQuery Easing with slideUp Easing Function

Question

I just read this question and answer from StackExchange, but the solution does not work for me.

This does not work:

 $("#top_slide").slideUp(5000, "easeInOutQuart");

But this does work:

$("#top_container").animate({height: headerHeight}, 5000, "easeInOutQuart");

And I am using jQuery-1.10.2.js, the most recent one.

Any thoughts?

//

I added the easing plug-ins like this, and it works in the jsfiddle:

<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.easing.compatibility.js"></script>
<script src="js/jquery.easing.min.js"></script>

And the script code is like this:

 $("#top_slide").slideUp({ duration: 5000, easing: "easeInOutQuart" });

And I still get this error:

Uncaught TypeError: Object #<Object> has no method 'easeInOutQuart'
rr.run jquery.js:9216
l jquery.js:8914
x.fx.timer jquery.js:9511
er jquery.js:8981
a jquery.js:9305
x.extend.dequeue jquery.js:3948
(anonymous function) jquery.js:3991
x.extend.each jquery.js:657
x.fn.x.each jquery.js:266
x.fn.extend.queue jquery.js:3984
x.fn.extend.animate jquery.js:9316
x.fn.(anonymous function) jquery.js:9442
(anonymous function) playingWithjQuery.php:38
c jquery.js:3048
p.fireWith jquery.js:3160
x.extend.ready jquery.js:433
q

Thanks in advance!

//

I changed it to just a single div, here is my html and here is the error page:

<!DOCTYPE html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.easing.compatibility.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>
    <script>
        $(function() {
            $("div").slideUp(5000, "easeInOutQuart");

        });


    </script>

    <div style="height: 300px; width: 300px; background: green;"></div> 
</body>

**Also I am using a localhost server instead of actually being online, would that affect the plugins even though I have the source files on my local server?

Could it be your selectors? Those are two different elements that you are using it on. Additionally, you're not specifically mentioning that you are *loading* the easing library for jQuery. If you don't, then you won't get the results you expect. Finally, is the *easing* that doesn't work? For example, in your first code segment - does it *slide* at all, but doesn't ease, or what? — random_user_name, Nov 01 '13 at 14:14
For the first one adding the easing breaks it, it no longer slides. The second one is not broken by adding the easing. It is possible that because I don't have the plug-in, that the second one wasn't actually easing, but just doing what it did normally. Will check the code on Monday when back in the office and see what works! Thank you! — Livvy Jeffs, Nov 02 '13 at 15:14

Henry Florence · Accepted Answer · 2013-11-06T17:32:21.423

8

JQuery only offers one easing function as standard, other ones are part of the easing plugin. This includes easeInOutQuart.

According to the jQuery API, .slideUp call should look something like this:

$("#top_slide").slideUp({ duration: 5000, easing: "easeInOutQuart" });

jsfiddle: http://jsfiddle.net/L9D8e/

Edit - this version of the html definitely works!

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js></script>
</head>

<body>
<script>
    $(function() {
        $("div").slideUp(5000, "easeInOutQuart");

    });
</script>

  <div style="height: 300px; width: 300px; background: green;"></div> 
</body>
</html>

edited Nov 06 '13 at 17:32

answered Nov 01 '13 at 14:31

Henry Florence

2,848
19
16

Thanks for putting the jsfiddle up, but it still isn't working for me. I put in the plugins in the header but it still gives me the error: Uncaught TypeError: Object # – Livvy Jeffs Nov 02 '13 at 19:56
Only 2 of those 4 script tags are required the first and the last. However, not sure that would cause your problem. What browser are you testing your page in? I haven't seen exceptions like that before! – Henry Florence Nov 03 '13 at 03:09
I'm using Chrome, I added more plugins when it didn't work hoping that the more the better (although I know that's not how it works). – Livvy Jeffs Nov 04 '13 at 15:07
Can you post more of your HTML file? Does the single page version work for you? – Henry Florence Nov 04 '13 at 21:12
@LivvyJeffs See edit in my answer, the easing script needs to be imported after jQuery, and only 2 of the imports are needed. It shouldn't matter where you host the scripts localhost file:// or cdn in my example. – Henry Florence Nov 06 '13 at 14:44

score 0 · Answer 2 · answered Nov 01 '13 at 14:15

0

Using the easing plugin you can do

$("#top_slide").slideUp({duration:5000, easing:"easeInOutQuart"});

answered Nov 01 '13 at 14:15

Spokey

10,974
2
28
44

jQuery Easing with slideUp Easing Function

2 Answers2

Linked