Анимация окна с ослаблением

Question

У меня есть элемент, который откроется, когда я нажму кнопку, это работает, но теперь мне нужно его оживить, и это то, что я не знаю. Это мой код:

JQuery

$(".trigger-window-1").on("click", function(e){ 
    e.preventDefault(); 
    $(".window-1").toggleClass("closed-window"); 
}); 

Когда я нажимаю элемент с классом ".trigger окна-1" он открывает окно с классом " .trigger-window-1 ", довольно простой, но теперь я хочу оживить это, и я не могу понять, как это сделать.

PD: Я знаю, что должен использовать функцию анимации, но я не могу понять, как это сделать. Благодарю.

Answer 1

Вы можете вызвать функцию анимирования на множестве разных данных, таких как высота. Вы можете увидеть, одушевленные функция JQuery в doc here

Вот пример:

$(".trigger-window-1").on("click", function(e){ 
e.preventDefault(); 
$(".window-1").toggleClass("closed-window"); 
if($(".window-1").hasClass('closed-window')) { 
    $(".window-1").animate({ 
     'height':100 
    }); 
} else { 
    $(".window-1").animate({ 
     'height':200 
    }); 
} 

});

Here a live example of the above on jsfiddle