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

this question exact duplicate of:

• fadein fadeout background image 4 answers

i have background-image must animated through fadein , fadeout effect on hover event. how can that?

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 fiddle1.

incase if wish using css3 transition then,

change css 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