How to fade icons using jQuery?

Asked

Viewed 1,741 times

0

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?

jquery

2 answers

5

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

  • lionbtt you said exactly what I want but I tested your code here but you didn’t take it to change the image at Hover, have you help me.

  • Did it give any error? fadein and out worked and soh did not change the img, or made no effect?

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

  • Pretty cool! I didn’t know this CSS property. However, he said he wanted to change the image, so it wouldn’t just be changing the color of background, would have to change the backgroud-image.

  • 1

    Yes, but it is up to him to change your code. In this case, yes, he can use an image as background.

  • Thanks for all your help but the CSS3 of Jefferson Alison help me a lot, thanks.

  • For nothing, just mark the answer as correct :)

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.