CODEWITHSUNDEEP
jquerycss
Igor Houwat
Igor Houwat

Reputation: 25

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

Everything works pretty well in this animation till the last bit. I've made a CodePen, and also inserted the jQuery code below.

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

Upvotes: 1

Views: 33

Answers (2)

user6622043
user6622043

Reputation: 101

add hide(); after removeClass("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(); is wrong, check the documentation

Upvotes: 0

kalym4ik
kalym4ik

Reputation: 118

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

Upvotes: 1

Related Questions