Replace backgroundColor with backgroundImage in jQuery animate effect

Question

I have a working fade in/fade out jQuery example here: http://jsfiddle.net/mcgarriers/NJe63/6/

However, I'm wondering if it is possible to replace the background-color red effect with a background image?

Many thanks for any pointers

Possible duplicate of this question: http://stackoverflow.com/questions/977090/fading-in-a-background-image — Billy Moat, Aug 27 '12 at 21:33

score 1 · Answer 1 · answered Aug 27 '12 at 21:37

You could do this with CSS3. You could create a div tag to the size of your choice around the image then use a basic CSS3 transition.

  #yourdiv a {
     background-color: #FFF;
}

#yourdiv a:hover {
     background-color: #000;
     -webkit-transition: background-color 600ms linear;
     -moz-transition: background-color 600ms linear;
     -o-transition: background-color 600ms linear;
     -ms-transition: background-color 600ms linear;
     transition: background-color 600ms linear;
}

Or you can have a image fade into another with CSS3: http://css3.bradshawenterprises.com/cfimg1/

Sorry, I should have made it clearer in my question - sadly this needs to work in IE so I don't think I can use this answer. Thanks anyway :) — michaelmcgurk, Aug 27 '12 at 21:38

dotfury · Accepted Answer · 2012-08-27T22:12:59.753

1

How about trying something like this?

I altered the code from your jsfiddle link.

$('.box').mouseenter(function(){
    $(this).stop().animate({opacity: 0}, 0).css('background', 'url(http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg)').animate({ opacity: 1 }, 1000);
}).mouseleave(function(){
    $(this).stop().animate({opacity: 1}, 0).css('background', 'white');
});

edited Aug 27 '12 at 22:12

answered Aug 27 '12 at 21:39

dotfury

312
5
13

I have tried this here: http://jsfiddle.net/mcgarriers/NJe63/12/ but as you can see it doesn't work as expected. Any ideas? – michaelmcgurk Aug 27 '12 at 21:41
you should remove `background:white` from css – Dariush Jafari Aug 27 '12 at 21:46
Hi Dariush. Sadly this still doesn't seem to help. My Google logo image completely disappears when it should remain always. And no bg image loads :/ – michaelmcgurk Aug 27 '12 at 21:51
2

I tried it again and it works. I updated the code a little as well. $('.box').mouseenter(function(){ $(this).stop().animate({opacity: 0}, 0).css('background', 'url(http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg)').animate({ opacity: 1 }, 1000); }).mouseleave(function(){ $(this).stop().animate({opacity: 0}, 0).css('background', 'white'); });; – dotfury Aug 27 '12 at 21:52
1

thanks for the reply - can you update the code in your first 'answer' as stackoverflow seems to have cropped your answer in the comments. – michaelmcgurk Aug 27 '12 at 21:54
Sorry. I need to keep Google logo displayed always. I just want to change white background to 'hello kitty' image on hover. Is this possible? – michaelmcgurk Aug 27 '12 at 22:03
Code is updated to keep the google logos, the opacity just had to be set back to 1 on moueout. – dotfury Aug 27 '12 at 22:13
Thanks again for the reply. Can you tell me why the Google Logo appears to 'blink' on mouseover? – michaelmcgurk Aug 28 '12 at 05:35

score 0 · Answer 3 · edited May 23 '17 at 12:12

0

You cannot fadein/fadeout background-image of a HTML element, but you can with background-color.

Would it possibly be your solution? Fade background image in and out with jQuery?

edited May 23 '17 at 12:12

Community

1
1

answered Aug 27 '12 at 21:48

lnguyen55

737
6
16

Replace backgroundColor with backgroundImage in jQuery animate effect

3 Answers3