4

カスタムアニメーションを使用してクリックすると、<div>これらのさまざまな要素を「呼び出す」ことになっているいくつかの要素とメニューがあります。<div>

メニューは次のとおりです。

  • 普通
  • リモート
  • ツール
  • 登録
  • ログイン
  • 寄付
  • コンタクト
  • 利用規約

次に、クリックしたメニューエントリに基づいて、さまざまなdivを制御して表示する必要があります。

私は2つの機会に助けが必要です：

  1. アニメーションの作成（以下のjsfiddleを参照）
  2. 多くのコードを書き直すことなく、div間の遷移を効率的に処理します。

機会1：

メニュー（たとえばリモート）をクリックすると、他の表示されているメニューが完全に右側に移動して消えて（overflow: hiddenメインのdivで使用しました）、左側から適切なdivが表示されます。 in（リモートページdiv）。

つまり、基本的に、slideDownとslideUpを水平にしたいのです。

これは私がこれまでに得たものです：http：//jsfiddle.net/Dugi/UtH4m/8/

これは、ローカルで自分のWebサイトにすでにあるものを示す良い例です。メニューボタンをクリックしたときに左側から適切なdivを入力できませんでした。途中で立っているdivを非表示にできるようにすることができました。

最後の質問：では、 .animate（）を使用して、他の表示されているdivが右側に移動した後、左側から適切なdivを入力するにはどうすればよいですか？

機会2：

上記のjsfiddleからわかるように、既存のそれぞれを調べて<div>非表示にする必要がありました。

$('#remote').click(function()
{
      $('#normal-page').animate({marginLeft: '100%'}, 'fast'); // here
      $('#tools-page').animate({marginLeft: '100%'}, 'fast');  // here   
});

最後の質問：このプロセスを自動化し、表示されているすべてのdivを非表示にして、メニューボタンがクリックされたときに適切なdivを表示する方法はありますか？

私が知りたいのはこれだけです。

ありがとう

4

2 に答える 2

5

completeanimate 関数のパラメーターを使用して、それを実現できます。差し支えなければ、HTML と CSS を少し変更しました。 http://jsfiddle.net/UtH4m/9/

最終版: http://jsfiddle.net/UtH4m/13/

于 2012-12-23T12:58:12.117 に答える
3

これがあなたの望むものであることを願っています。マークアップを少し変更しました。#container移動するすべてのページに を追加しました。これはどのように見えるかです:

于 2012-12-23T13:52:16.697 に答える