3

メインコンテナ要素が物理的に左または右に移動するFacebookモバイルアプリを模倣したいというアイデアで遊んでいます。ただし、これをいくつかの方法で試してみましたが、移動したい要素が移動ではなくサイズ変更されているように見えます。期待どおりに移動するのではなく、何を、またはなぜそれを行うのかわかりません。

注: メイン要素を固定要素と絶対要素として試しました。また、javascript で「marginLeft」または「marginRight」の代わりに「left」または「right」だけを試してみました。

だから私は何が間違っているのだろうか？

http://jsfiddle.net/4GF8c/

CSS:

html, body{margin:0;padding:0;width:100%;height:100%;}
#wrap_main{background-color:gray;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;}
#wrap_bottom_left{background-color:aqua;width:50%;float:left;}
#wrap_bottom_right{background-color:green;width:50%;float:right;}​

JavaScript：

    var isMenuOpen = false;
    $(document).ready(function()
    {
    //code
    });
    $('#menu_left_trigger').click(function(e)
    {
        e.preventDefault();
        var $mainEle = $('#wrap_main');
        if(isMenuOpen == false)
        {
            isMenuOpen = true;
            $mainEle.animate({marginLeft:"10%"}, 1000);
        }
        else
        {
            isMenuOpen = false;
            $mainEle.animate({marginLeft:"0"}, 1000);
        }
    });
    $('#menu_right_trigger').click(function(e)
    {
        e.preventDefault();
        var $mainEle = $('#wrap_main');
        if(isMenuOpen == false)
        {
            isMenuOpen = true;
            $mainEle.animate({marginRight:"10%"}, 1000);
        }
        else
        {
            isMenuOpen = false;
            $mainEle.animate({marginRight:"0"}, 1000);
        }
    });
​

html:

<div id="wrap_main">
    <a href="javascript:void(0);" id="menu_left_trigger">Menu</a><br>
    <a href="javascript:void(0);" id="menu_right_trigger">Sub Menu</a>
</div>
<div id="wrap_bottom_left">
    <ul>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
    </ul>
</div>
<div id="wrap_bottom_right">
    <ul>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
    </ul>
</div>​
4

2 に答える 2

1

まぁ。私は自分の問題を解決しました。それで、私はそれをここで同様にしようとしている人々のために分解します。

したがって、最初のロジック。「マスター」要素を含む私のコンテンツは、絶対/固定位置です。これは本質的にそれをDOMから切り離します。パーセントベースの高さと幅は機能しません。したがって、固定/絶対である全高、全幅の要素の効果を作成します。要素のプロパティに、、、、（css）をすべてゼロに設定して、4つのポイントがすべての側面で「0」に接触するように指示する必要がleft:ありright:ましたtop:。bottom:

それで。その中に私の問題がありました。通常、固定要素または絶対位置の要素を移動すると、私が試みたのとまったく同じように移動します。ただし、絶対または固定を設定する場合のほとんどすべての原因で、左上または右上、あるいはそれぞれ同じで下を設定している可能性があります。

x%つまり、要素は4つのポイントすべてにとどまるようにスタイル設定されているので、要素または非常に多くのピクセルをいずれかの方向に移動したい場合。両方向を補正する必要があるので、要素を正しく処理したい場合はleft:10%;right-10%、両側の動きを補正する必要があります。

最終的に私がやったことは、不注意にサイズを変更するのではなく、要素全体が移動するように、どちらかの方向に正と負になるように変更を加えることです。

それが将来のプレーヤーにとって理にかなっていることを願っています

于 2012-12-09T00:44:53.967 に答える
0

「isMenuOpen」ステータスを修正する必要があります。これはバイナリ テストではなく、3 方向テストです。左開き、右開き、または閉じている可能性があります。あなたの関数はそれを説明できる必要があります。現在のオフセットを確認し、それを使用して位置がどこにあるべきかを計算する必要があります。ここを参照してください: jQuery .animate を使用して div を右から左にアニメーション化しますか?

要素が絶対配置されている場合、余白は (特定のブラウザーでは) ボックス モデルの一部として解釈され、ページ上の他のアイテムのレイアウトに影響を与える可能性があるため、余白ではなく左/右の配置をアニメーション化することをお勧めします。これを行うときは、リンクがアニメーション表示されないように注意してください。

編集：フィドルを十分にいじらずに答えを出しました。これにより、正しい方向に進むはずです。ごめん！

于 2012-12-08T23:55:32.863 に答える