Adding duration animation to jQuery hover effect using .animate()

Question

I have 3 images that I am creating an effect for, where when hovered on, the image swaps to a different image. When trying to add a duration to the transition using the .animate() method, the entire effect is disabled. Is there a better method than using .animate(), or is there an issue in my code that stops .animate() from working?

Cheers

HTML

<img class="navbarimg" data-alt-src="images/icons/facebookhover.png" src="images/icons/facebook.png" alt="Facebook Page">
<img class="navbarimg"  data-alt-src="images/icons/instagramhover.png" src="images/icons/instagram.png" alt="Instagram Page">
<img class="navbarimg"  data-alt-src="images/icons/githubhover.png" src="images/icons/github.png" alt="Github Page">

jQuery

/* Hover effect for the nav bar */
/* Section A - Function to make the alt src be used instead of the default source */
    var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

/* Section B - Runs the function to switch the src's */
    $(function () {
        /* Finds images wiht the 'navbarimg' class, and runs the function for those images */
        $('img.navbarimg').hover(sourceSwap, sourceSwap);
    });

Answer 1

As you asked for better alternative you could use fontawesome or just include these 3 icons in your custom font if your images are not different from regular social media icons.

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <style> .fa{ font-size: 40px; margin: 10px; cursor:pointer; transition: color .3s ease-out; } .fa:hover { color: skyblue;} </style> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-instagram" aria-hidden="true"></i> <i class="fa fa-github" aria-hidden="true"></i> <br> <i class="fa fa-facebook-square" aria-hidden="true"></i> <i class="fa fa-instagram" aria-hidden="true"></i> <i class="fa fa-github-square" aria-hidden="true"></i>