Mattias Mattias - 1 year ago 151
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);

Answer Source


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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download