jQuery 缓动与 SlideUp 缓动功能

标签 jquery slideup jquery-easing

我刚刚读过这篇文章question and answer from 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,这是 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 仅提供一种标准缓动函数,其他函数是 easing plugin 的一部分。这包括 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>

关于jQuery 缓动与 SlideUp 缓动功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19728456/

相关文章:

jquery - jQuery的hide和slideUp方法是等价的吗?

jquery - 让slideToggle等待其他div的slideUps完成?

javascript - 滚动时堆叠 div

jquery - 从基本 HTML 和 CSS 转向 Bootstrap 或流体布局

javascript - 仅当拖动的元素具有特定类时,如何删除它?

jquery - 寻找一个类似 “swing” 的 easing 可以用 jQuery 和 CSS3 表达

jQuery.easing[jQuery.easing.def] 不是一个函数

javascript - 使用 js.color 的自定义选择不起作用

javascript - 使用 jQuery 在单击时显示/隐藏 div

Jquery 代码可以在 JsFiddle 上运行,但不再可以在我的电脑上运行