Both animations are triggered simultaneously (sometimes even multiple times)....
<div id="home-bt" class="button"></div>
<div id="about-bt" class="button"></div>
<div id="beauty-bt" class="button"></div>
<div id="pamper-bt" class="button"></div>
<div id="gallery-bt" class="button"></div>
<div id="news-bt" class="button"></div>
<div id="contact-bt" class="button"></div>
</div>
</div>
<div class="page-container" id="home">
home
</div>
<div class="page-container" id="about">
about
</div> etc...
$(document).ready(function() {
$(".page-container").hide();
$("#home-bt").click(function() {
$(".page-container").hide(2000, function(){
$("#home").show("slow");
}); }); etc.....
I've also attempted the same approach with similar outcome...
$(document).ready(function() {
$(".page-container").hide();
$("#home-bt").click(function() {
$("#about,#beauty,#pamper,#gallery,#contact,#news").hide(2000, function(){
$("#home").show("slow");
}); });