jquery - How do I make these css background transitions smoother? -

jquery - How do I make these css background transitions smoother? -

i have background slideshow on site changes image every 5 seconds.

here javascript/jquery:

var currentbackground = 0; var backgrounds = []; backgrounds[0] = '../img/hero1.jpg'; backgrounds[1] = '../img/hero2.jpg'; backgrounds[2] = '../img/hero3.jpg'; function changebackground() { currentbackground++; if(currentbackground > 2) currentbackground = 0; $('.heroimg').fadeout(300,function() { $('.heroimg').css({ 'background-image' : "url('" + backgrounds[currentbackground] + "')" }); $('.heroimg').fadein(300); }); settimeout(changebackground, 5000); } $(document).ready(function() { settimeout(changebackground, 5000); });

at moment, images fade white, next image.

how can alter code images fade on each other instead?

maybe should fadein images , not fadeout them , maybe create improve effect ?

jquery slideshow fadein fadeout