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