Is there a way to modify the functionality of my black button so that when clicked, the red div fades out while the blue div fades in? Right now, clicking the button switches between the two divs without any fading effect.
Fiddle: http://jsfiddle.net/ddac5391/1/
HTML
<a id="contact-button" href="#">Get in touch</a>
<div id="primary"></div>
<div id="contact-keebs"></div>
CSS
#contact-button {
background: #000;
background-size: 24px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding: 10px 20px;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#primary {
background: red;
height: 200px;
position: absolute;
width: 200px;
}
#contact-keebs {
background: blue;
display: none;
height: 200px;
position: absolute;
width: 200px;
}
JS
var c = 0;
$('#contact-button').click(function (e) {
e.preventDefault();
if (c++ % 2 == 0) {
$(this).addClass('work-button').text('Work');
$('body').addClass('contact-content');
$('#contact-keebs').stop().fadeIn(500).show();
} else {
$(this).removeClass('work-button').text('Get in touch');
$('body').removeClass('contact-content');
$('#contact-keebs').stop().fadeOut(500).hide();
}
});