使用 .animate() 将持续时间动画添加到 jQuery 悬停效果

Question

我有 3 张图片正在为其创建效果，将鼠标悬停在其中时，图片会切换到不同的图片。当尝试使用 .animate() 方法为过渡添加持续时间时，整个效果被禁用。有没有比使用 .animate() 更好的方法，或者我的代码中是否存在阻止 .animate() 工作的问题？

干杯

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

当您要求更好的替代方案时，您可以使用 fontawesome，或者如果您的图像与常规社交媒体图标没有什么不同，则只需在您的自定义字体中包含这 3 个图标。

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