Fade in background image with jQuery

前端未结

关注

 3  1612

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

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)

伪装坚强ぢ

2020-12-22 11:59
use
```
 $('div.bgImage').animate({ opacity: 1 }, { duration: 3000 });
```
assuming you are starting of with style="opacity: 0;"
0 讨论(0)
发布评论:

提交评论
- 加载中...

情歌与酒

2020-12-22 11:59

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)