jQuery Easing with slideUp Easing Function

本文介绍了jQuery Easing with slideUp Easing Function的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚阅读了这篇，但该解决方案对我不起作用。

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

这不起作用：

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

但这确实有效：

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

我使用的是最近的jQuery-1.10.2.js。

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

有什么想法？

我添加了宽松像这样的插件，它适用于jsfiddle：

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>

脚本代码如下：

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

我仍然收到此错误：

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

提前致谢！

我把它改成了一个div，这是我的html，这里是：

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>

** 我也使用本地主机服务器而不是实际在线，这会影响插件，即使我的本地服务器上有源文件？

推荐答案

JQuery只提供一个缓动功能标准，其他是的一部分。这包括easeInOutQuart。

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

根据jQuery API， .slideUp 调用应该如下所示：

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

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

jsfiddle：

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

编辑 - 这个版本的html肯定有效！

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

这篇关于jQuery Easing with slideUp Easing Function的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！