How to animate background-image transition?

I am adding a class to a div that changes the background image:

$('div').addClass('specialBackground');

The problem is that this effect is rather jarring. I wou开发者_如何转开发ld like to fade between the different background images, and hopefully keep this css in my stylesheet. How can I achieve this?

Take a look here for an example.

A fade effect will work by putting an image over the background and changing its opacity.