jQuery缓动效果与slideUp缓动函数

Question

jQuery缓动效果与slideUp缓动函数

3

我刚刚阅读了这个StackExchange上的问题和答案，但是解决方法对我无效。

这种方法不起作用：

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

但这确实有效：

但是这确实有效：

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

我正在使用jQuery-1.10.2.js，这是最新版本。

有什么想法吗？

//

我已经像这样添加了缓动插件，在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代码，这是错误页面:

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

我正在使用本地服务器而不是在线服务器，这会影响插件吗？即使我在本地服务器上有源文件？

- Livvy Jeffs

那就使用能够工作的。这里有什么问题？ - karthikr

可能是你的选择器有问题吗？这是两个你正在使用的不同元素。此外，您没有特别提到您正在为jQuery 加载缓动库。如果您没有这样做，那么您将无法获得您期望的结果。最后，缓动是不能正常工作的吗？例如，在您的第一个代码段中 - 它是否会滑动，但不会缓动，或者怎么样？ - random_user_name

第一个添加缓动效果后出现了问题，它不再滑动。第二个添加缓动效果后没有出现问题。可能是因为我没有插件，所以第二个实际上并没有使用缓动效果，而只是按照正常方式运行。周一回到办公室时会检查代码并看看哪种方法有效！谢谢！ - Livvy Jeffs

2个回答

0

使用缓动插件，您可以做到

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

- Spokey

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Henry Florence · Accepted Answer

JQuery只提供一个标准缓动函数，其他的缓动函数是缓动插件的一部分。其中包括easeInOutQuart。

根据jQuery API，.slideUp调用应该像这样：

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

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>