I recently developed a jQuery animation where clicking on specific buttons triggers a hidden div to slide from left: -650px; to left: 0px;. You can see an example by clicking here. However, I've noticed that when another button is clicked to reveal a different hidden div, the previous one doesn't return to its original position of left: -650px;; instead, it remains at left: 0;. Can anyone suggest what needs to be added in order to achieve this functionality?
HTML:
<div id="wrapper">
<div class="top-block">
<ul>
<li><a id="one" href="#" class="proBtn">block</a>
</li>
<li><a id="two" href="#" class="proBtn">test</a>
</li>
<li><a id="three" href="#" class="proBtn">test</a>
</li>
<li><a id="four" href="#" class="proBtn">Lists</a>
</li>
<li><a href="#" class="proBtn">hello</a>
</li>
<li><a href="#" class="proBtn">test</a>
</li>
</ul>
<!-- HOME SECTION -->
<div id="one-bck" class="mid-block fadeInLeft" style="background:green;"></div>
<div id="two-bck" class="mid-block fadeInLeft" style="background:red;"></div>
<div id="three-bck" class="mid-block fadeInLeft"></div>
<div id="four-bck" class="mid-block fadeInLeft"></div>
</div>
</div>
JavaScript:
$(document).ready(function () {
$('.proBtn').click(function () {
$('li').removeClass('active');
$('li a').removeClass('blue');
$(this).parent("li").addClass('active');
$(this).addClass('blue');
});
// Animation for Button One
$('#one').click(function () {
$('#two-bck, #three-bck, #four-bck').animate({
left: '-650px',
opacity: 0
}, 500).removeClass('animated');
$('#one-bck').addClass('animated').animate({
left: '0px',
opacity: 1
}, 500);
});
// Animation for Button Two
$('#two').click(function () {
$('#one-bck, #three-bck, #four-bck').animate({
left: '-650px',
opacity: 0
}, 500).removeClass('animated');
$('#two-bck').addClass('animated').animate({
left: '0px',
opacity: 1
}, 500);
});
// Animation for Button Three
$('#three').click(function () {
$('#one-bck, #two-bck, #four-bck').animate({
left: '-650px',
opacity: 0
}, 500).removeClass('animated');
$('#three-bck').addClass('animated').animate({
left: '0px',
opacity: 1
}, 500);
});
});