0

jQueryを使用するのはこれが初めてです。大きな背景画像を読み込んでいますが、読み込まれると3秒以上でフェードします。このスクリプトは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);
  });
});
4

3 に答える 3

10

使用する

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

あなたがで始まっていると仮定してstyle="opacity: 0;"

于 2012-09-01T13:11:12.657 に答える
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);
  });
});
于 2012-09-01T13:56:21.587 に答える
0

このため、多くの行のコードを記述する必要はありません。この単純なコードはあなたのために機能します...

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

  $(document).ready(function () {
    $('div.bgImage').fadeIn(3000);
  });
});
于 2012-09-01T13:06:59.897 に答える