My jQuery code is not recognizing an if statement. You can check out the CodePen link here.
On my site, I have 4 page transitions - page right, page left, page up, and page down. The contact page is hidden beneath the main hero sections and appears with the up and down transitions. I want the contact page to slide back down if the user has it open and clicks on page right or left. I used an if statement to check the marginTop value of the contact div, but it's not working as expected.
You can view the code snippet below and also access the full code on the provided CodePen link.
$(document).ready(function() {
// The if statement is not working as expected
if ($('.contact-wrapper').css("marginTop") == '-10%') {
$('#down').trigger('click');
}
// --------------------------------------------
$('#pg-right').click(function() {
$('.home-wrapper, .about-wrapper').animate({
marginLeft: '-=100%'
}, 500);
});
$('#pg-left').click(function() {
$('.home-wrapper, .about-wrapper').animate({
marginLeft: '+=100%'
}, 500);
});
$('#up').click(function() {
$('.contact-wrapper').animate({
marginTop: '-=10%'
}, 500);
});
$('#down').click(function() {
$('.contact-wrapper').animate({
marginTop: '+=10%'
}, 500);
});
}) .home-wrapper {
position: fixed;
background: blue;
height: 90vh;
left: 0;
width: 100%;
}
.about-wrapper {
position: fixed;
background: green;
height: 90vh;
width: 100%;
left: 100%;
}
.contact-wrapper {
position: fixed;
background: black;
height: 80vh;
width: 100%;
left: 0;
top: 90%;
}
#pg-right,
#pg-left,
#up,
#down {
position: fixed;
font-size: 3em;
color: white;
}
#pg-right {
top: 10%;
left: 80%;
}
#pg-left {
top: 10%;
left: 20%;
}
#up {
top: 50%;
left: 60%;
}
#down {
top: 50%;
left: 40%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="home-wrapper"></div>
<div class="about-wrapper"></div>
<div class="contact-wrapper"></div>
<a href="#" id="pg-right">Right</a>
<a href="#" id="pg-left">Left</a>
<a href="#" id="up">Up</a>
<a href="#" id="down">Down</a>