-1

#sidebarメインの div の上にある div を取得して、div内の 1 つの画像 (下の画像の赤い矢印) の onClick の位置から位置#streamに移動し、同じ画像の逆の onClick を実行しようとしています。JavaScript を使用する必要があることはわかっていますが、コードがどうなるかわかりません。できればdivの動きもアニメートしたいです。left: 565px;left: 0px;#sidebar

クリック前の状態 (矢印が私のリンクになります): メインビュー

クリック後の状態: アプリビュー

前もって感謝します！

4

3 に答える 3

4

animate を使用してアニメーション化する場合は、こちらをご覧ください。正しい方向に向けられるはずです：

http://jsfiddle.net/3DpfJ/5/embedded/result/ - フルスクリーンの結果

http://jsfiddle.net/3DpfJ/5/ - ソースコード

だから私が単純にしたことはこれでした：

$(function()
{
  var expanded = false;
  $('#sidebar').click(function()
                      {
                          if (!expanded)
                          {
                              $(this).animate({'left' : '0px'}, {duration : 400});
                              expanded = true;
                          }
                          else
                          {
                             $(this).animate({'left' : '565px'}, {duration: 400});
                              expanded = false;
                          }
                      });
 });

これはおそらく、アニメーションを介して行う最も簡単な方法です。Duration は 400 に設定されているため、アニメーションには 0.4 秒かかります。お好みで調整してください。

このスクリプトは、ページをロードしたらすぐに実行して、エキスパンドが確実に機能するようにする必要があります。<script type="text/javascript"></script>ヘッダーにタグを作成し、そこにコードを配置します。

それがうまくいくことを願っています。

于 2013-02-23T10:07:43.860 に答える
1 
$('#sidebar').click(function(){
    $(this).animate({"left": "0"});
});
于 2013-02-23T09:28:00.743 に答える
1

jquery はトグルを使用してこれを処理します。非表示と表示を 1 つの機能 (トグル) に組み合わせているため、通常の「アニメーション」よりもうまく機能します。

ニーズに合わせて調整する必要があるかもしれませんが、これで始めることができます: http://jqueryui.com/toggle/

于 2013-02-23T09:29:41.603 に答える