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>

**また、実際にオンラインではなくローカルホスト サーバーを使用しています。ローカル サーバーにソース ファイルがありますが、プラグインに影響はありますか?

4

2 に答える 2

8

JQuery は標準として 1 つのイージング関数のみを提供し、他のイージング関数はイージング プラグインの一部です。これには、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>
于 2013-11-01T14:31:03.387 に答える
0

あなたができるイージングプラグインを使用する

$("#top_slide").slideUp({duration:5000, easing:"easeInOutQuart"});
于 2013-11-01T14:15:32.497 に答える