0

HTMLのdivで非表示/表示を実現したいのですが、このようにします。

これが私のhtmlです：

<div id="left"></div>
<div id="middle"> 
<input type="button" id="button"/>
</div>
<div id="right"></div>

そして、これは私のcssです：

body 
{ 
 height: 100%; 
 margin: 0; 
 padding: 0 ;
 border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
 float:left;
 width:11%;
 height:570px;
 margin:0;
}

centerdiv のボタンをクリックして divを非表示にし、div のサイズに合わせて divrightを展開してから、divを右端まで移動したときに、これを実行したいと考えています。左から右、右から左など、水平方向のアニメーションで非表示/表示したい。言葉をいじるのは難しいかもしれないので、私が話していることが実際にわかるように、小さな写真を作成しました。leftrightcenter

開始フェーズ: 開始フェーズ

そして終了フェーズ: ここに画像の説明を入力

4

4 に答える 4

4

ここで動作するデモを見ることができます... http://jsfiddle.net/miqdad/3WDbz/

または、ここで最初の div の幅をインクリメントする他のデモを見ることができます.. http://jsfiddle.net/miqdad/3WDbz/1/

于 2012-06-19T12:01:51.043 に答える
1

数日前にほぼ同じ質問がありましたが、それも役立つかもしれません。この例では、チェックボックスを使用して div を非表示にしています。他のdivを100％幅にします。

javascript、右の div が非表示の場合、左の div は 100% 幅にする必要があります。

例の JavaScript コード:

$(function() {
    $("#foo").on("click",function() {
        if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
            $('#checked-b').css("width","60%");
            $('#checked-a').css("width","40%");
        }) ;
        else $('#checked-a').show('fast',function(){
           $('#checked-b').css("width","100%").show();         
           $('#checked-a').css("width","0%").hide();

        });
    });
});

例: http://jsfiddle.net/mplungjan/5rdXh/

于 2012-06-19T13:37:51.907 に答える
0

JQuery での実装は簡単です。この JSFiddle の例を見てください: http://jsfiddle.net/q39wv/2/

(すべての人へ: 通常、ここに JSFiddle リンクだけを配置することはしませんが、今回は、HTML と CSS にいくつかの調整を加えて、全体がどのように機能するかを OP に示す価値があると思います)。

Javascript のみのソリューションは、実装がはるかに困難です。

于 2012-06-19T12:01:22.810 に答える