How I can animate fadin and fadeout background image in jquery?

Question

I have a background-image that must be animated through fadein and fadeout effect on hover event. How I can do that?

provide the code that you have tried or place the fiddle link. — Praveen, Jul 18 '13 at 05:09
@user1671639: Not "or." Code must always be in the question itself. http://jsfiddle.net links are a useful *adjunct*, not a substitute. — T.J. Crowder, Jul 18 '13 at 05:10
@T.J.Crowder Right. I forget it. Here when adding jsfiddle link without code, SO gives an error message. Thanks for pointing it. — Praveen, Jul 18 '13 at 05:16
Also you can try using [css3 transition](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions). — Praveen, Jul 18 '13 at 05:20
http://stackoverflow.com/questions/6890218/css-background-opacity Second answer has what you need. — grmmph, Jul 18 '13 at 06:02

Praveen · Answer 1 · 2013-07-18T08:01:52.440

HTML:

<div></div>

CSS:

div {
    width:200px;
    height:200px;
    background-image:url(http://dummyimage.com/100x100/000/fff);
}

jQuery:

$('div').hover(function () {
    $(this).stop().fadeOut("1000", function () {
        $(this).css("background", "url('http://dummyimage.com/100x100/000/ff0000')").fadeIn(1000);
    });
}, function () {
    $(this).stop().fadeOut("1000", function () {
        $(this).css("background", "url('http://dummyimage.com/100x100/000/fff')").fadeIn(1000);
    });
});

Check this fiddle1.

Incase if you wish to it using CSS3 transition then,

change the CSS like this

div {
    height: 200px;
    width: 200px;
    color: black;
    background-image:url(http://dummyimage.com/100x100/000/fff);
    transition: background-image 1s linear;
    -moz-transition: background-image 1s linear;
    -webkit-transition: background-image 1s linear;
    -ms-transition: background-image 1s linear;
}
div:hover {
    background-image:url(http://dummyimage.com/100x100/000/ff0000);
}

Fiddle2

How I can animate fadin and fadeout background image in jquery?

1 Answers1