Question

ok, im trying to animate something to different 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

Answer 1

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.