apply a fadeIn (or smooth animation) to a on click function

<script>
                  // add img in hidden state then fade   
                  // copy title and alt attributes from small img to new one
                  jQuery(document).ready(function() {
                  //on img click

                  jQuery("#node-facility-full-group-gallery img").click(function(event) {

                  //prevent lighthouse default action
                  event.preventDefault()

                  //get img src
                  var imgToDisplay = jQuery(event.target).attr("src");

                  //appended img
                  //construct html for image to be displayed
                  jQuery('<img id="appendedImg" src="' + imgToDisplay + '">').load(function() {
                            jQuery('#node-facility-full-group-gallery #appendLocation').html(this);
                            console.log(document.getElementById("appendLocation").offsetTop);
                            window.scrollTo({
                                    top: document.getElementById("appendLocation").offsetTop - 40,
                                    behavior: 'smooth'
                                       })
                                 });
                           })
                    });
</script>

Currently my code looks like the above, and it is functioning as intended, where if you click on a small gallery on a page it takes that image and displays a larger version of that.

However I would like the loading/removal of the image to be done with a smoother animation, like using fadeIn(), but I'm struggling to see how I would implement this to my current code.

I think I could load in the image in a hidden state then reveal it using fadeIn, but I don't know how I would go about applying this to my current code.

Any suggestions/assistance would be greatly appreciated! Thanks.