Skip to main content

jQuery のif文が上手くいきません。

いろいろやってみたのですが、上手くいかず、救いを求めてココにやってきました。。。すみません。。。

<style>
#wrapper{
    display:block;
    margin:0 auto;
    overflow:hidden;
    background:rgba(68,136,79,1);
    width:700px;
    height:1000px;
    }
#aaa{
    display:block;
    position:relative;
    right:-300px;
    float:right;
    background:rgba(128,255,0,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#bbb{
    display:block;
    position:relative;
    left:-300px;
    background:rgba(0,255,255,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#ccc{
    display:block;
    position:relative;
    right:-300px;
    float:right;
    background:rgba(204,153,153,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#ddd{
    display:block;
    position:relative;
    left:-300px;
    background:rgba(255,255,153,1);
    width:300px;
    height:300px;
    z-index:1;
    }
    
#aaa-btn{
    display:block;
    position:relative;
    top:-550px;
    right:50px;
    float:right;
    background:rgba(128,255,190,1);
    width:200px;
    height:50px;
    }
#bbb-btn{
    display:block;
    position:relative;
    top:-600px;
    background:rgba(0,255,190,1);
    width:200px;
    height:200px;
    }
#ccc-btn{
    display:block;
    position:relative;
    top:-550px;
    right:50px;
    float:right;
    background:rgba(204,153,190,1);
    width:200px;
    height:50px;
    }

#ddd-btn{
    display:block;
    position:relative;
    top:-500px;
    background:rgba(255,255,190,1);
    width:200px;
    height:200px;
    }
</style>



</head>

<body>
<div id="wrapper">
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>
<div id="ccc">ccc</div>
<div id="ddd">ddd</div>

<div id="aaa-btn">go to aaa</div>
<div id="bbb-btn">go to bbb</div>
<div id="ccc-btn">go to ccc</div>
<div id="ddd-btn">go to ddd</div>



</div>


</body>

css はちょっと違います。。
すみません。

まずは状況から説明させていただきます。

モニターの可視領域を作り、その中にボタンを4つ作りました。
btnA B C D という風です。

それから、モニターの不可視領域にコンテンツABCDを作りました。

イラストαの状況です

イラストα
イラストβ

次にそれぞれのbtnにプログラムしたいです。
・btnAをクリックしたら、不可視領域にあるAが左から右へスライドしてきて、可視領域の中央に配置される。
・そのとき、すべてのbtnA B C Dはクリック不可。
・Aが元の不可視領域に戻るには「Aそのもの」をクリックする。
・Aが元に戻って、また、btnA B C Dはクリック可能になる。

イラストβの状況です。

また、btnA C は「左から右へ」、btnB Dは「右から左へ」動かしたいです。

このケースでif文を考えるとき、如何にしたら良いのでしょうか?

教えてください。

お願いいたします

webman
  • 199
  • 2
  • 12