Skip to main content
1 / 4
webman
  • 199
  • 2
  • 12

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

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

#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; } aaa bbb ccc ddd go to aaa go to bbb go to ccc go to ddd

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