0

JQuery.show()と.hide()関数を使用している div がいくつかありますが、効果/方向を変更することはできません。

HTML

<li><a class="link" name="box1">HOME</a></li>
<li><a class="link" name="box2">ABOUT ME</a></li>

<div id="box1">
  SOME CONTENT
</div>

<div id="box1">
  SOME CONTENT
</div>

JavaScript

$(".link").click(function(){
    $('.container').hide();
    $('#'+$(this).attr('name')).show();   
});

単に使用.show()して動作して.hide()いるように見えます。.show('slide')も機能します。しかし.show('fold')、.show('blind')そうではありません。アニメーションの方向/速度を変更しようとすることもありません。例えば：

$(".link").click(function(){
    $('.container').hide('slide', {direction:'up'}, 1000);
    $('#'+$(this).attr('name')).show('slide', {direction: 'up'}, 1000);   
});

最初に div の下部を表示することが重要です。これが、.slideDown 関数を使用しない理由です。

ドキュメントとオンライン チュートリアルを調べてみましたが、なぜ機能しないのかわかりません。

4

1 に答える 1

3

「拡張された」アニメーション効果の場合、jQuery UIライブラリ（またはおそらくアニメーションコアのみの特定の実装）を含める必要があります。

次のAPIページからshow()：

jQuery 1.4.3以降、イージング関数に名前を付けるオプションの文字列を使用できます。イージング関数は、アニメーション内のさまざまなポイントでアニメーションが進行する速度を指定します。jQueryライブラリの唯一のイージング実装は、swingと呼ばれるデフォルトと、linearと呼ばれる一定のペースで進行する実装です。プラグイン、特にjQuery UIスイートを使用すると、より多くのイージング機能を利用できます。

したがって、「jQuery」で使用できる名前付きアニメーションは「linear」と「swing」です。jQuery UIを含めると、他のいくつかが開かれます（それらを転記するのは無意味に思えたのでリンクします）。

CDNからGoogleがホストするjQueryUIにリンクするには：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

参照：

于 2012-08-27T22:06:36.083 に答える