How to fade icons using jQuery?

Question

I need some help I wanted to make some animated icons on the site, I needed a FADE effect, that when you hover the mouse over the icon it changes the image smoothly.

Sample site

In the icons of the site :Flexible, Responsive and Retina Ready

Does anyone know any examples on the internet?

Answer 1

Effect fadeIn() and fadeOut() only messes with the opacity element. You will have to change the image.

What you can do is by passing the mouse sends a FadeOut() in the image changes it and sends a fadeIn()

HTML

<div id="imgHover"><img src="imagem.png"/></div>

Jquery

$('#imgHover img').hover(function(){
    $(this).fadeOut(1000).attr('src','imagem2.png').fadeIn(1000);
});

Answer 2

It is possible to do this using only css, through trasitions:

HTML:

<div class="circle">
  <i class="icon-wrench"></i>
</div>

CSS:

@import url(http://vasterad.com/themes/astrum/css/icons.css);


.circle{
    transition-duration: 0.5s;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f89;
}

.circle:hover{
    background: #ff8;
}


.circle i{
    transition-duration: 0.5s;
    color: #fff;
    float: left;
    font-size: 18px;
    left: 37%;
    margin: 20px 0;
    position: relative;
    z-index: 5;
}

.circle:hover i{
    color: red ;
}

EXAMPLE