Добавление анимации продолжительности в эффект наведения jQuery с использованием .animate()

У меня есть 3 изображения, для которых я создаю эффект, для которого, когда он зависает, изображение свопится к другому изображению. При попытке добавить продолжительность к переходу с использованием метода .animate() весь эффект отключен. Есть ли лучший метод, чем использование .animate(), или есть проблема в моем коде, которая останавливает работу .animate()?Добавление анимации продолжительности в эффект наведения jQuery с использованием .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); 
    });

источник

2016-07-19 James Milner

Я не думаю, что вы можете сделать это, какой вид анимации вы смотрите? вы можете получить что-то с непрозрачностью –

http://stackoverflow.com/questions/2744579/jquery-animate-on-an-image-replacement –

http://stackoverflow.com/questions/13314405/animating-src-attribute –

Как вы просили лучшей альтернативы вы можете использовать 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>

источник

2016-07-19 03:08:12 link2pk

Приветствия за ответ, но я разработал свои собственные значки для использования на моем сайте, поэтому я сомневаюсь, что могу использовать этот метод, но я буду изучать его, приветствия. –

Добавление анимации продолжительности в эффект наведения jQuery с использованием .animate()

ответ

Смежные вопросы