Igor Houwat Igor Houwat - 2 months ago 6
CSS Question

Problems animating a button w/jQuery: doesn't hide

Everything works pretty well in this animation till the last bit. I've included the jQuery for reference and a link to the pen http://codepen.io/houwat/pen/BLNdAo

When I click on the second button, the text area comes out animated. When I click on the text area to close it up, it does a final "appear" before disappearing completely. I tried to add an opacity property in the closing animation (CSS file), but it doesn't seem to be enough. Any ideas?

$(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

Add to the .swiftin class animation-fill-mode: forwards; in order to stop your animation on the last frame:

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