jQuery Easing with slideUp Easing Function

StackOverflow https://stackoverflow.com/questions/19728456

  •  02-07-2022
  •  | 
  •  

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?

Was it helpful?

Solution

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>

OTHER TIPS

Using the easing plugin you can do

$("#top_slide").slideUp({duration:5000, easing:"easeInOutQuart"});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top