[jQuery] Multiple #ID Selector troubles
Hi I am currently in the process of slapping together a navigation
based in jQuery. I have everything working just fine, however I wanted
to start cleaning up my code and creating some functions. In the very
beginning I am hiding a crap ton of div layers which later will be
used to kinda simulate opening and closing of pages.
My first step is to get the hide functions cleaned up. I understand
you can use multiple selectors.
$('#grow1, #grow2, #grow3, #grow4').hide();
$('#content1, #content2, #content3, #content4').hide();
However that isn't working in my case? and I can't seam to grasp what
I might be doing wrong.
Original, which is working, however I want to learn how to do things
right. (I've been working with javascript for a week, and jQuery maybe
5 days now)
$(document).ready(function() {
$('#grow1').hide();
$('#grow2').hide();
$('#grow3').hide();
$('#grow4').hide();
$('#content1').hide();
$('#content2').hide();
$('#content3').hide();
$('#content4').hide();
var counter = 0;
var fSpeed = 400; //fadein(speed) fadeout(speed)
$('#but1').click(function() {
if(1 != counter && counter !=0){
if(counter == 2){
$('#but1').addClass('buttonSelected');
$('#but2').removeClass('buttonSelected');
$('#content2').fadeOut(fSpeed).hide();
$('#grow2').animate({height: 10, top:100}, 'slow');
$('#grow2').animate({width: 0}, 'slow');
setTimeout(function(){
$('#grow1').animate({width: 560}, 'slow');
$('#grow1').animate({height: 406}, 'slow', function()
{
$('#content1').fadeIn(fSpeed);
counter = 1;
});
}, 600);
}
else if(counter == 3){
$('#but1').addClass('buttonSelected');
$('#but3').removeClass('buttonSelected');
$('#content3').fadeOut(fSpeed).hide();
$('#grow3').animate({height: 10, top: 200}, 'slow');
$('#grow3').animate({width: 0}, 'slow');
setTimeout(function(){
$('#grow1').animate({width: 560}, 'slow');
$('#grow1').animate({height: 406}, 'slow', function()
{
$('#content1').fadeIn(fSpeed);
counter = 1;
});
}, 600);
}
else if(counter == 4){
$('#but1').addClass('buttonSelected');
$('#but4').removeClass('buttonSelected');
$('#content4').fadeOut(fSpeed).hide();
$('#grow4').animate({height: 10, top: 300}, 'slow');
$('#grow4').animate({width: 0}, 'slow');
setTimeout(function(){
$('#grow1').animate({width: 560}, 'slow');
$('#grow1').animate({height: 406}, 'slow', function()
{
$('#content1').fadeIn(fSpeed);
counter = 1;
});
}, 600);
}
}
if(counter == 0){
$('#but1').addClass('buttonSelected');
$('#grow1').animate({width: 560}, 'slow');
$('#grow1').animate({height: 406}, 'slow', function()
{
$('#content1').fadeIn(fSpeed);
counter = 1;
});
}
});
I have 3 more groups that figure out what button was clicked and if
something was opened. I will eventually write out functions.
the working version can be found online: http://danthedesignman.com/c2/html/index3.html
thanks in advance!