если селекторы цепочки?

Question

хорошо, я пытаюсь анимировать что-то на разную высоту, если у выбранного идентификатора есть выбранный класс. у меня есть следующий код.

 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());
   }
}

, который связывает анимации друг с другом, независимо от того, что я нажимаю, в итоге получается 1040 пикселей в высоту, что я делаю неправильно ??

попытался изменить его на

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

абсолютно без эффекта

Answer 1

Вы отделили операторы if из кода на следующей строке. Единственное, что вы выполняете, когда условие истинно, это пустой оператор.

Изменить это:

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

в

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

и то же самое для остальных трех.

Answer 2

Вы можете многое исправить, воспользовавшись приятным языком, который Javascript:

$.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());
});