使用jQuery淡入背景图像 [英] Fade in background image with jQuery

问题描述

这是我第一次使用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 image'，'url（./ css / background.jpg）'）; 
 $（'div.bgImage'）。fadeTo（3000，1）; 
}）; 
} ; 
  

解决方案

use

  $（'div.bgImage'）。animate（{opacity：1}，{duration：3000}）;假设您开始使用 style =opacity：0;  
 / code> 
 
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);
  });
});

解决方案
use 
 $('div.bgImage').animate({ opacity: 1 }, { duration: 3000 });
assuming you are starting of with style="opacity: 0;"

                        
这篇关于使用jQuery淡入背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！