-2

仕事の合間なので時間がかかってしまいましたが、やっと編集できました!
現在、こんな感じです。↓

$(function(){
	var duration=300;
	var duration2=500;

	$("#pc-page-box1").on("mouseover",function(){
		$(this).find(".black-sheet").stop(true).animate({
			opacity:0.6},
			duration);
	});
	$("#pc-page-box1").on("mouseout",function(){
		$(this).find(".black-sheet").stop(true).animate({
			opacity:1},
			duration);
	});

	$("#pc-page-box2").on("mouseover",function(){
		$(this).find(".black-sheet").stop(true).animate({
			opacity:0.6},
			duration);
	});
	$("#pc-page-box2").on("mouseout",function(){
		$(this).find(".black-sheet").stop(true).animate({
			opacity:1},
			duration);
	});

	$("#pc-page-box3").on("mouseover",function(){
		$(this).find(".black-sheet").stop(true).animate({
			opacity:0.6},
			duration);
	});
	$("#pc-page-box3").on("mouseout",function(){
		$(this).find(".black-sheet").stop(true).animate({
			opacity:1},
			duration);
	});

	$("#pc-page-box4").on("mouseover",function(){
		$(this).find(".black-sheet").stop(true).animate({
			opacity:0.6},
			duration);
	});
	$("#pc-page-box4").on("mouseout",function(){
		$(this).find(".black-sheet").stop(true).animate({
			opacity:1},
			duration);
	});

	$("#pc-page-box5").on("mouseover",function(){
		$(this).find(".black-sheet").stop(true).animate({
			opacity:0.6},
			duration);
	});
	$("#pc-page-box5").on("mouseout",function(){
		$(this).find(".black-sheet").stop(true).animate({
			opacity:1},
			duration);
	});
});

$(function(){
	var duration=300;
	$(document).on('click', '.leftBoxParent', function(){
		$(this).parent('div').find('.leftBox').stop(true).animate({left:-300}, duration);
		$(this).find('.leftBox').stop(true).animate({left:300}, duration);
	});
});

$(function(){
	var duration=300;
	$(document).on('click', '.rightBoxParent', function(){
		$(this).parent('div').find('.rightBox').stop(true).animate({right:-300}, duration);
		$(this).find('.rightBox').stop(true).animate({right:300}, duration);
	});
});
body,td,th {
	font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";
}
h1,h2,h3,h4,h5,h6 {
	font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";
}
.img_box {
	position:relative;
	display:block;
	margin:0;
	padding:0;
}
.img_box img {
	z-index:0;
	margin:0;
	padding:0;
}
.img_box a {
	color:white;
	font-size:70px;
}

.img_comment2 {
	font-size:70px;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	position:absolute;
	bottom:150px;
	left:0px;
	z-index:1;
	text-align:left;
	padding:10px;
	margin:0;
	text-shadow:3px 3px 3px #000;
}

.pages{
	display:block;
	float:left;
	position:relative;
}
.comments{
	font-size:70px;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:white;
	position:absolute;
	bottom:150px;
	left:150px;
	z-index:1;
	text-align:center;
	padding:10px;
	margin:0;
	text-shadow:3px 3px 3px #000;
}
.japanese-font{
	font-family:"Noto Sans";
	font-size:18px;
	font-weight:bold;
	color:white;
	position:absolute;
	bottom:100px;
	left:150px;
	z-index:1;
	text-align:center;
	padding:10px;
	margin:0;
	text-shadow:3px 3px 3px #000;
}

body{

}

/*.gridContainer {
width: 88.5%;
max-width: 1300px;
padding-top:50px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}*/

#pc-wrapper{
	display:block;
	width:1300px;
	height:1800px;
	margin:0 auto;
}
#pc-wrapper p{
	margin:0;
}
#pc-wrapper img{
	display:block;
}
#pc-header-box{
	display:block;
	position:relative;
	width:1300px;
	height:800px;
	margin:0 auto;
	vertical-align:bottom;
}
.pc-header-title{
	display:inline-block;
	position:absolute;
	font-size:60px;
}

#pc-logo-box{
	display:block;
	position:relative;
	width:1300px;
	height:200px;
	margin:0 auto;
}
#pc-logo-box img{
	display:block;
	position:relative;
	top:50px;
	margin:0 auto;
}

#pc-page-box1{
	display:block;
	position:relative;
	width:650px;
	height:430px;
	float:left;
	overflow:hidden;
}
#pc-page-box2{
	display:block;
	position:relative;
	width:650px;
	height:430px;
	float:left;
	overflow:hidden;
}

#pc-page-box3{
	display:block;
	position:relative;
	width:650px;
	height:430px;
	float:left;
	overflow:hidden;
}
#pc-page-box4{
	display:block;
	position:relative;
	width:650px;
	height:430px;
	float:left;
	overflow:hidden;
}
#pc-page-box5{
	display:block;
	position:relative;
	width:650px;
	height:430px;
	float:left;
	overflow:hidden;
}

.black-sheet{
	display: block;
	position: absolute;
	width: 650px;
	height: 430px;
	background: rgba(0,0,0,0.8);
	z-index: 1;
}
.pc-page-title{
	display:block;
	position:absolute;
	font-size:30px;
	color:rgba(255,255,255,1);
	z-index:2;
}
.pc-page-title-japanese{
	display:block;
	position:absolute;
	top:30px;
	font-size:24px;
	color:rgba(255,255,255,1);
	z-index:3;
}
#we-are-infobox{
	display:block;
	position:absolute;
	left:-300px;
	width:300px;
	height:300px;
	background:rgba(51,153,204,1);
	opacity:1;
	z-index:5;
}
#info-infobox{
	display:block;
	float:right;
	position:absolute;
	right:-300px;
	width:300px;
	height:300px;
	background:rgba(51,153,204,1);
	opacity:1;
	z-index:5;
}
#price-infobox{
	display:block;
	position:absolute;
	left:-300px;
	width:300px;
	height:300px;
	background:rgba(51,153,204,1);
	opacity:1;
	z-index:5;
}
#blog-infobox{
	display:block;
	float:right;
	position:absolute;
	right:-300px;
	width:300px;
	height:300px;
	background:rgba(51,153,204,1);
	opacity:1;
	z-index:5;
}
#contact-us-infobox{
	display:block;
	position:absolute;
	left:-300px;
	width:300px;
	height:300px;
	background:rgba(51,153,204,1);
	opacity:1;
	z-index:5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gridContainer">
    <div id="pc-wrapper">
        <div id="pc-header-box">
            <p><div class="pc-header-title">Welcome to our website"</div>
            </p>
        </div>

        <div id="pc-logo-box">
        </div>

        <div id="pc-page-box1" class="leftBoxParent">
            <p>
            <div class="pc-page-title">We Are</div><div class="pc-page-title-japanese">私たちについて</div>
            <div id="we-are-infobox" class="leftBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box2" class="rightBoxParent">
            <p><div class="pc-page-title" >Info</div>
            <div class="pc-page-title-japanese">お知らせ</div>
            <div id="info-infobox" class="rightBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box3" class="leftBoxParent">
            <p><div class="pc-page-title">Price</div><div class="pc-page-title-japanese">プライス</div>
            <div id="price-infobox" class="leftBox"></div><div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box4" class="rightBoxParent">
            <p><div class="pc-page-title">Blog</div><div class="pc-page-title-japanese">ブログ</div>
            <div id="blog-infobox" class="rightBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box5" class="leftBoxParent">
            <p><div class="pc-page-title">Contact Us</div>
            <div class="pc-page-title-japanese">メール</div>
            <div id="we-are-infobox" class="leftBox">
            </div><div class="black-sheet"></div>
            </p>
        </div>
    </div>
</div><!--end gridContainer-->

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

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

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

イラストαの状況です

イラストα
イラストβ

次にそれぞれのbtnにプログラムしたいです。
・btnAをクリックしたら、不可視領域にあるAが左から右へスライドしてきて、可視領域の中央に配置される。

イラストβの状況です。

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

自分の知識でできる範囲で作ってみました。

if文を使って動かすべきなのかどうか、よくわからず、とにかく動くようにプログラミングしてみました。
しかし、右セクションはは右、左セクションは左とセパレートになってしまっていますが、本来は、右が動いていて、もし、左を押したら、右は右に戻って、左は左から出てくるという動きにしたいです。。

教えてください。

お願いいたします

5
  • if 文があまり質問の本体ではない気がするのですけども…
    – Yosh
    Commented 2015年4月1日 3:39
  • すみません、どう書いていいのか良くわかっておらず。。。 htmlは書いたのですが、アップされず、どうしたらアップされるのでしょうか?!?! ともかく、現状までのプログラムを書きます
    – webman
    Commented 2015年4月1日 5:11
  • html じたいは編集を経ていちおう見えているようにみえますが,"if 文がうまく行かない" という状況でないように思います(どの部分が if なのでしょうか).たぶん現状やりたいことの丸投げをしているように読めるために downvote がついているので,「こうしてみたけどこのようにうまく行かなかった,どこがいけないんだろう」というふうにするか,もっと質問内容を絞り込んで質問するのがいいと思います(質問内容を絞り込めれば質問する前に検索で解決することも多いですけどね).
    – Yosh
    Commented 2015年4月1日 13:09
  • ありがとうございます! 実は一度作ったのですが、動かず、そのイフ文のプログラムを消して、アップロードしてたんです。 結局、イフ文がわからないので、自分のわかる範囲でプログラムを変えて再びアップさせていただきました。 わからなくて悔しいです(苦笑) また、丸投げ状態になってしまっていて、みなさま、失礼をいたしました。
    – webman
    Commented 2015年4月3日 4:19
  • インデントを修正して、埋め込みスニペットにしてみました。表示領域が1300x1800とかなり大きいので、スニペットを実行したあと最大化してスクロールすると問題の箇所が見えてきます。
    – unarist
    Commented 2015年4月3日 6:19

2 件の回答 2

1

>btnA C は「左から右へ」、btnB Dは「右から左へ」動かしたいです。
btnではなくコンテンツですか?

>・そのとき、すべてのbtnA B C Dはクリック不可。
z-index: 0 ボタンA,B,C,D配置
z-index: 1 画面全体に覆いかぶさるようにdiv要素(id="cover"としておきます)を(body直下に)配置
z-index: 2 コンテンツA,B,C,Dを配置する

css:
{
position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%;
z-index: 1;
}

style="display: none;"

アニメーションが開始したら表示する
$("#cover").css("display", "");

Aをクリックしたら非表示にする
$("#cover").css("display", "none");

0
$(function(){
    var duration=300;
    $(document).on('click', '.leftBoxParent', function(){
        $(this).parent('div').find('.leftBox').stop(true).animate({left:-300}, duration);
        $(this).find('.leftBox').stop(true).animate({left:300}, duration);
        $('.rightBoxParent').find('.rightBox').stop(true).animate({right:-300}, duration);
    });
});

$(function(){
    var duration=300;
    $(document).on('click', '.rightBoxParent', function(){
        $(this).parent('div').find('.rightBox').stop(true).animate({right:-300}, duration);
        $(this).find('.rightBox').stop(true).animate({right:300}, duration);
        $('.leftBoxParent').find('.leftBox').stop(true).animate({left:-300}, duration);
    });
});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。