使用 jQuery 淡入背景图像答案

【问题标题】：Fade in background image with jQuery使用 jQuery 淡入背景图像
【发布时间】：2012-08-27 00:18:23
【问题描述】：

这是我第一次使用 jQuery。我正在加载一个大的背景图像，当它被加载时，我会在三秒钟内将其淡化。该脚本适用于 Firefox 和 Chrome，但不适用于 IE（当然！）。是否有任何故障安全的方法可以让它在 IE 中神奇地工作？有没有更漂亮的方法来编写它？

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

【问题讨论】：

试试return false - 这个东西在IE中很重要。另外，你能不能不使用全局变量，使用 var = _image.id 和 var = _image.src？
分配给对象时不应使用var，例如_image.src = ...

标签： jquery html css internet-explorer fadein

【解决方案1】：

使用

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

假设您从style="opacity: 0;"开始

【讨论】：

是的，它会的。我确定 ie 8。对于较低版本的不确定
我试过了，但是没有用。我在加载函数中添加了一个警报，并且永远不会在 IE 中触发。

【解决方案2】：

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

【讨论】：

【解决方案3】：

为此，您无需编写那么多行代码，这个简单的代码就可以为您工作...

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

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

【讨论】：