if selectors chaining?

ok, im trying to animate something to differen开发者_C百科t heights if a selected id has a selected class. i have the following code.

 function myfunction() {


   if ($('#homebutton').hasClass("active"));
   {
    $('#content').animate({height: "240px",opacity: 1}, 100 , hideLoader());
   }

   if ($('#showbutton').hasClass("active"));
   {
   $('#content').animate({height: "79px",opacity: 1}, 200 , hideLoader());
   }

   if ($('#aboutbutton').hasClass("active"));
   {
   $('#content').animate({height: "527px",opacity: 1}, 300 , hideLoader());}

   if ($('#contactbutton').hasClass("active"));
   {
   $('#content').animate({height: "1040px",opacity: 1}, 400 , hideLoader());
   }
}

that is chaining the animations after each other no matter what i click it ends up being 1040px high what am i doing wrong??

tried changing it to

{if ($('#homebutton').hasClass("active"));
$('#content').animate({height: "240px",opacity: 1}, 100 , hideLoader());
}

with absolutely no effect

You have separated the if statements from the code on the next line. The only thing that you execute when the condition is true is an empty statement.

Change this:

if ($('#homebutton').hasClass("active"));

into:

if ($('#homebutton').hasClass("active"))

and the same for the other three.

You can clean that up a lot by taking advantage of the nice language that Javascript is:

$.each({
  '#homebutton': { height: '240px', speed: 100 },
  '#showbutton': { height: '79px', speed: 200 },
  '#aboutbutton': { height: '527px', speed: 300 },
  '#contactbutton': { height: '1040px', speed: 400 }
}, function(selector, controls) {
  if ($(selector).hasClass('active'))
    $('#content').animate({height: controls.height, opacity: 1}, controls.speed, hideLoader());
});