Question

Here is my code:

  elem.animate({ background-image: "url(" + imagedir + backgrounds[i] + ")" }, 1500 );
                    });

But apparently this is invalid, can anyone see why?

Answer 1

You’re not telling us what program is giving what errors (is it the browser console? A validator?), but I’m pretty sure it won’t work (if that’s what you mean by invalid) due to the fact you can’t animate background-image.

DreamWeaver will be moaning at you probably because background-image isn’t a JavaScript CSS attribute. Use backgroundImage or, specifically to jQuery, wrap it in quotes: "background-image". To simply change the background image, use .css() instead of .animate(), but this won’t fade it. Is the image a single colour or an actual image?

---

If you want to fade between two images, there is a solution using two separate images, one inside a container. There’s a JSFiddle here demonstrating this.

HTML

<div class="outer">
    <div></div>
</div>

CSS

div
{
    width: 320px;
    height: 240px;
    background: url('http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg');
}

div div
{
    width: inherit;
    height: inherit;
    background: url('http://www.travelwizard.com/caribbean/media/sandy%20lane%20beach.jpg');
}

jQuery

$(document).ready(function() {
    $(".outer").hover(function() {
        $(this).children().fadeOut();
    }, function() {
        $(this).children().fadeIn();
    });
});