On a website I'm working on, I have the buttons ".page-about" and ".page-contact" expand a div to reveal content. If the div is expanded and you click on the other button, it fades content in and out. It's pretty simple.
This works perfectly on desktops. On my iPhone, the div expands fine initially, but if it's already expanded and the other button is tapped, it turns the div background color off and then immediately back on (it's a gradient) while the content is transitioning. The content is fading in and out perfectly, it's just the background that is giving me trouble for some reason. Here is the javascript:
$('.page-about').click(function(e) {
e.preventDefault();
if ($('#bb').hasClass('expand')) {
if (contactvisible()){
$('#contact-p').removeClass().addClass('contact-hid');
$('#about-p').removeClass().addClass('about-vis');
} else {
$('#bb').removeClass('expand');
}
} else {
$('#contact-p').removeClass().addClass('hidden');
$('#about-p').removeClass().addClass('show');
$('#bb').addClass('expand');
}
});
$('.page-contact').click(function(e) {
e.preventDefault();
if ($('#bb').hasClass('expand')) {
console.log(aboutvisible());
if (aboutvisible()){
$('#about-p').removeClass().addClass('about-hid');
$('#contact-p').removeClass().addClass('contact-vis');
} else {
$('#bb').removeClass('expand');
}
} else {
$('#about-p').removeClass().addClass('hidden');
$('#contact-p').removeClass().addClass('show');
$('#bb').addClass('expand');
}
});
function aboutvisible(){
if ($('#about-p').hasClass('about-vis') || $('#about-p').hasClass('show')) {
return true;
} else {
return false;
}
}
function contactvisible(){
if ($('#contact-p').hasClass('contact-vis') || $('#contact-p').hasClass('show')) {
return true;
} else {
return false;
}
}
The classes that are being added/removed are just changing opacity. They also have CSS3 transitions attached to them. Can anyone help me figure out why this is happening to the background? None of the CSS is touching it.
Here is the HTML:
<div class="bottom-border" id="bb">
<h1>Hi, my name is <span>Blank.</span></h1>
<div id="about-p" class="about-vis">
<p>Filler text here</p>
<p>more filler text</p>
</div>
<div id="contact-p" class="contact-vis">
<p>This is how you can contact me</p>
<div><i class="ss-icon">email</i><i class="ss-icon">dribbble</i><i class="ss-icon">twitter</i></div>
</div>
</div>
To clarify, the content is transitioning fine, but for some reason, it's affecting the background of the containing div (#bb).
here is the CSS as well:
#about-p, #contact-p {
position: absolute;
width: 100%;
}
.about-hid, .contact-hid {
opacity: 0;
-webkit-transition: opacity .35s ease;
-moz-transition: opacity .35s ease;
-ms-transition: opacity .35s ease;
-o-transition: opacity .35s ease;
transition: opacity .35s ease;
}
.about-vis, .contact-vis {
opacity: 1;
-webkit-transition: opacity .35s ease;
-moz-transition: opacity .35s ease;
-ms-transition: opacity .35s ease;
-o-transition: opacity .35s ease;
transition: opacity .35s ease;
}
.hidden {
opacity: 0;
}
.show {
opacity: 1;
}
