Проблемы с анимацией кнопки w/jQuery: не скрывает

Question

Все работает очень хорошо в этой анимации до последнего бит. Я сделал CodePen, а также вставил код jQuery ниже.

Когда я нажимаю на вторую кнопку, область текста выходит анимированной. Когда я нажимаю на текстовую область, чтобы закрыть ее, она окончательно «появляется» до полного исчезновения. Я попытался добавить свойство непрозрачности в закрывающей анимации (файл CSS), но, похоже, этого недостаточно. Есть идеи?

$(document).ready(); 

$('#button2d').click(function() { 
    $('.price_description').removeClass("swiftin"); 
    $('.price_description').addClass("open"); 
    $('.price_description').show(); 
    $('#button3d').fadeOut(080); 
}); 

$('.price_description').click(function() { 
    $('.price_description').removeClass("open"); 
    $('.price_description').addClass("swiftin"); 
    $('#button3d').fadeIn('slow', function() { 
     $('.price_description').css('display', 'none'); 
    }); 
}); 

Answer 1

Добавить к классу .swiftin animation-fill-mode: forwards; для того, чтобы остановить анимацию на последнем кадре:

.swiftin { 
    animation: swiftin 0.5s; 
    animation-fill-mode: forwards; 
} 

Answer 2

добавить скрыть(); после удаленияClass ("open")

$(document).ready(); 

$('#button2d').click(function() { 
    $('.price_description').removeClass("swiftin"); 
    $('.price_description').addClass("open"); 
    $('.price_description').show(); 
    $('#button3d').fadeOut(080); 
}); 

$('.price_description').click(function() { 
    $('.price_description').removeClass("open").hide(); 
$('.price_description').addClass("swiftin"); 
$('#button3d').fadeIn('slow', function() { 
    $('.price_description').css('display', 'none'); 
    }); 
}); 

P.S. $(document).ready(); неправ, проверьте документацию