How to slowly show-hide with jquery prop-CodePudding

When I click the button, I want to hide that button and show the div. I want this to be slow.For this:

$('#add_note').on('click',function (){
        $(this).hide(200);
        $('#add_note_form').show(200);
    })

i used this. But, I want to make this using prop('hidden',true/false).

$('#add_note').on('click',function (){
        $(this).prop('hidden',true);
        $('#add_note_form').prop('hidden',false);
    })

It works like this but is it possible to do it slow?

CodePudding user response：

You can't animate a slow transition using the boolean hidden property.

However you can use fadeOut() instead, then set the property in the callback when the animation completes:

$('#add_note').on('click',function() {
  $(this).fadeOut(1000, function() {
    $(this).prop('hidden', true);
  });

  $('#add_note_form').fadeIn(1000);
})