Fundido en la imagen de fondo con jQuery

Esta es la primera vez que uso jQuery. Estoy cargando una imagen de fondo grande y cuando está cargada, la estoy desvaneciendo en más de tres segundos. Este script funciona en Firefox y Chrome, pero no en IE (¡por supuesto!). ¿Hay alguna manera fallida de hacerlo funcionar mágicamente en IE y hay alguna forma más bonita de escribirlo?


 $(document).ready(function () { // add bg image and fade var _image = new Image(); _image.id = 'newImageId'; _image.src = "./css/background.jpg"; $(_image).load(function () { $('div.bgImage').css('background-image', 'url(./css/background.jpg)'); $('div.bgImage').fadeTo(3000, 1); }); }); 

utilizar

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

asumiendo que está comenzando con style="opacity: 0;"

HTML

  
...

CSS

 .bgImage { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: none; } 

Javascript

 $(function() { var src = '../css/background.jpg'; var ele = $('.bgImage'); var img = $('', { src: src }).hide().appendTo(ele).load(function() { $(this).remove(); ele.css('background-image', 'url('+src+')').fadeIn(3000); }); }); 

para esto no necesitas escribir tantas líneas de código que este código simple funcionará para ti …

 $(document).load(function () { $('div.bgImage').css('background-image', 'url(./css/background.jpg)'); $(document).ready(function () { $('div.bgImage').fadeIn(3000); }); });