Mattias Mattias - 5 months ago 43
HTML Question

Fade in background image with jQuery

This is the first time I am using jQuery. I am loading a large background image and when it is loaded I am fading it in over three seconds. This script works on Firefox and Chrome but not in IE (of course!). Is there any fail safe way of making it magically work in IE and is there some prettier way of writing it?

<div class="bgImage" />

$(document).ready(function () {
// add bg image and fade
var _image = new Image(); = 'newImageId';
_image.src = "./css/background.jpg";

$(_image).load(function () {
$('div.bgImage').css('background-image', 'url(./css/background.jpg)');
$('div.bgImage').fadeTo(3000, 1);



 $('div.bgImage').animate({ opacity: 1 }, { duration: 3000 });

assuming you are starting of with style="opacity: 0;"