0

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);
    });
5

1 Answer 1

0

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>

1
  • Cheers for the answer, but I've developed my own icons for use on my site, so I doubt I can use this method, but I will look into it, cheers.
    – James M
    Jul 19, 2016 at 3:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.