How to make a fade effect on icons using jQuery?

Question

How to make a fade effect on icons using jQuery?

Navigation

#1 by (5 votes)
#2 by (2 votes)

0

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

Sample site

On site icons :Flexible , Responsive e Retina Ready

Does anyone know an example on the internet?

jquery

asked by anonymous 12.02.2014 / 19:38

2 answers

What does the expression 'system (' pause ')' do? Map two arrays and delete the item not found

score 5 · Answer 1

Effect fadeIn() and fadeOut() only works with the opacity of the element. You will have to do the image exchange.

What you can do is to hover the mouse to send a FadeOut() to the image change it and send 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);
});

score 2 · Answer 2

You can do this using css only, via transitions :

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