The if statement in jQuery is not working. (Correction)

Asked 2 years ago, Updated 2 years ago, 58 views

It took a long time because I was in between work, but I finally edited it!
It's like this right now.↓

$(function(){
	var duration = 300;
	variation2 = 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_boximg{
	z-index:0;
	margin:0;
	padding:0;
}
.img_boxa{
	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 —3px3px3px#000;
}

.pages{
	display:block;
	float:left;
	position:relative;
}
US>.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 —3px3px3px#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 —3px3px3px#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">
    <divid="pc-wrapper">
        <divid="pc-header-box">
            <p><div class="pc-header-title">Welcome to your website"</div>
            </p>
        </div>

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

        <divid="pc-page-box1" class="leftBoxParent">
            <p>
            <div class="pc-page-title" > We Are </div><div class="pc-page-title-Japanese" > About Us </div>
            <divid="we-are-infobox" class="leftBox">/div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <divid="pc-page-box2" class="rightBoxParent">
            <p><div class="pc-page-title">Info</div>
            <div class="pc-page-title-Japanese">Notice</div>
            <divid="info-infobox" class="rightBox">/div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <divid="pc-page-box3" class="leftBoxParent">
            <p><div class="pc-page-title">Price</div><div class="pc-page-title-Japanese">Price</div>
            <divid="price-infobox" class="leftBox">/div><div class="black-sheet">>/div>;
            </p>
        </div>

        <divid="pc-page-box4" class="rightBoxParent">
            <p><div class="pc-page-title"> Blog</div><div class="pc-page-title-Japanese"> Blog</div>
            <divid="blog-infobox" class="rightBox">/div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <divid="pc-page-box5" class="leftBoxParent">
            <p><div class="pc-page-title">Contact Us</div>
            <div class="pc-page-title-Japanese">Mail</div>
            <divid="we-are-infobox" class="leftBox">
            </div><div class="black-sheet"></div>
            </p>
        </div>
    </div>
</div><!--end gridContainer -->

Let me explain the situation first.

I created a visible area of the monitor and made four buttons in it.
It's called btnAB CD.

Then, I created the content ABCD in the invisible area of the monitor.

This is the status of illustration α

illustration α
illustration

Next, I would like to program on each btn.
·After clicking btnA, A in the invisible area slides from left to right and is placed in the center of the visible area.

This is the status of illustration beta.

Also, I want to move btnAC from left to right and btnBD from right to left.

I made it as far as I could with my own knowledge.

I wasn't sure if I should use an if statement to move it, so I just programmed it to move.
However, the right section is separated from the left, but originally, the right side is moving, and if I press the left side, I want the right side to go back to the right and the left side to come out from the left side.

Please let me know.

Please

javascript jquery

2022-09-30 20:19

2 Answers

>I want to move btnAC from left to right and btnBD from right to left.
Content, not btn?

>·At that time, all btnAB CDs cannot be clicked.
z-index: 0 buttons A, B, C, D placement
z-index: Place div element (id="cover") (just below body) to cover the entire screen
z-index: Place 2 contents A, B, C, D

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

style="display:none;"

Display when animation starts
$("#cover").css("display","";

Click A to hide
$("#cover").css("display", "none";

2022-09-30 20:19 

$(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);
    });
});

2022-09-30 20:19

If you have any answers or tips

Popular Tags
python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
Popular Questions

573 rails db:create error: Could not find mysql2-0.5.4 in any of the sources

881 /usr/bin/google-chrome:symbol lookup error:/usr/bin/google-chrome: undefined symbol:gbm_bo_get_modifier

620 Uncaught (inpromise) Error on Electron: An object could not be cloned

918 When building Fast API+Uvicorn environment with PyInstaller, console=False results in an error

574 Who developed the "avformat-59.dll" that comes with FFmpeg?

© 2024 OneMinuteCode. All rights reserved.