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

Question

我有三个图像正在为其创建效果，当悬停在上面时，图像会交换到不同的图像。当尝试使用.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

当您要求更好的替代方案时，如果您的图像与常规社交媒体图标没有什么不同，您可以使用font真棒，或者只在自定义字体中包含这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>