使用jQuery淡入背景图像_Jquery_Html_Css_Internet Explorer_Fadein

使用jQuery淡入背景图像

jquery html css internet-explorer

使用jQuery淡入背景图像,jquery,html,css,internet-explorer,fadein,Jquery,Html,Css,Internet Explorer,Fadein,这是我第一次使用jQuery。我正在加载一个大的背景图像，当它被加载时，我会在三秒钟内使其褪色。这个脚本适用于Firefox和Chrome，但不适用于IE（当然！）。有没有什么安全的方法可以让它在IE中神奇地工作？有没有更漂亮的方法来编写它 <div class="bgImage" /> 为此，你不需要写这么多行代码，这个简单的代码将为你工作 $(document).load(function () { $('div.bgImage').css('background-imag

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

<div class="bgImage" />

为此，你不需要写这么多行代码，这个简单的代码将为你工作

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

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

使用

假设您从

style=“opacity:0；”HTML开始
Javascript
$（函数（）{
var src='../css/background.jpg'；
var ele=$（'.bgImage'）；
var img=$（'Tryreturn false
-这个东西在IE中很重要。另外，你不能使用全局变量，比如var=\u image.id
和var=\u image.src
？你不应该在分配对象时使用var
，比如\u image.src=…是的。我肯定IE 8会这样做。对于较低的版本我不太确定。我已经尝试过了我已经在加载函数中添加了一个警报，并且在IE中从未触发过。
$(document).load(function () {
  $('div.bgImage').css('background-image', 'url(./css/background.jpg)');

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

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

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

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

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