Fade in background image with jQuery

2019-01-29 07:16发布

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();
  _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);
  });
});

标签： jquery html css internet-explorer fadein

3条回答

倾城　Initia

2楼-- · 2019-01-29 07:25

for this you dont need to write that many lines of code this simple code will work for u...

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

  $(document).ready(function () {
    $('div.bgImage').fadeIn(3000);
  });
});

0人赞添加讨论(0) 举报

够拽才男人

3楼-- · 2019-01-29 07:29

HTML

<body>
  <div class="bgImage"></div>
  ...
</body>

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 = $('<img>', {
    src: src
  }).hide().appendTo(ele).load(function() {
    $(this).remove();
    ele.css('background-image', 'url('+src+')').fadeIn(3000);
  });
});

0人赞添加讨论(0) 举报

Melony?

4楼-- · 2019-01-29 07:37

use

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

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

0人赞添加讨论(0) 举报