Animate dynamically inserted elements

Questions
1

I’m trying animate a “scroll to top” button dynamically inserted

$('.content').append('<button id="scroll_to_top_btn" title="Go to top"><i class="fas fa-arrow-up"></i></button>');
			
			//Show Scroll to top button when scroll and hide when on top
			$('.page-content-news').on('scroll', function () {
			  var scrollTop = this.scrollTop;
			  if(scrollTop > 0){
				  $('#scroll_to_top_btn').animate({'display': 'block'});
			  }
			  else{
				  $('#scroll_to_top_btn').animate({'display': 'none'});
			  }
			})

But don’t animate when I scroll the page (works fine with hide() and show())

Am I doing something wrong?

2

display is not animatable, what you expect here I don’t get. Just add/remove some CSS class to the button instead, and do the changes in CSS based on class, e.g. opacity 0 or 1