css - jQuery crossfade images and hide them with display:none -

i need fade div background-image in same container fixed dimension.

fadein , out need , work quite well, because want possibility click on each visible image, , that's impossible working opacity, if it's effect i'd have.. kind of crossfading between images.

html

<div class="image_container">     <div id="image1"></div>     <div id="image2" style="display:none"></div> </div> 

my simplified js

$( ).click(function() {   $( "#image1" ).fadeout();    $( "#image2" ).fadein(); } 

by placing images in absolute position on top of each other, can use jquery fade between them this:

<div class="image_container">   <div id="image1"></div>   <div id="image2" style="display:none"></div> </div>  <script type="text/javascrtip">   $(".image_container").click(function(){     $(this).find("div").fadeout();     $(this).find("div:hidden").fadein();   }) </script>  <style type="text/css">   .image_container div {     position:absolute;     width:338px;     height:225px;     top:0;     left:0;   }    #image1 {     background-image:url(http://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg);   }    #image2 {     background-image:url(http://imaging.nikon.com/lineup/dslr/df/img/sample/img_02.jpg);   } </style> 

here's fiddle demonstrate: https://jsfiddle.net/zmur2v8q/1/

simply click on image fade other one.