使用jQuery fadeIn()和fadeOut()隔行扫描背景图像 [英] Interlacing background images using jQuery fadeIn() and fadeOut()

问题描述

我使用以下功能对具有淡入和淡出效果的图像进行幻灯片显示.

I use the following function to make a slideshow of images with fade in and out effects.

var project_photos = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var project_photo_index = 0;

function nextPhoto() {
  $('#background').fadeOut();
  $('#background').css('background-image', 
    "url('images/" + project_photos[project_photo_index] + "')");
  $('#background').fadeIn();
  timer = setTimeout(function() {
    if (project_photo_index+1 > project_photos.length) {
      project_photo_index = 0;
    } else {
      project_photo_index++;
    }
    nextPhoto();
  }, 5000);
}

但是，我想对函数进行一些调整以消除fadeOut()和fadeIn()之间的空白时刻.我想要实现的是:

However, I want to tweak the function a bit to remove the white moments in between fadeOut() and fadeIn(). What I want to achieve is:

假定淡入和淡出时间为400ms，每张图像的显示时间为5s

1. 图像1在屏幕上显示0到5s，从5到5.4s开始淡出
2. 图像2首先隐藏，开始从4.8s淡入5.2s(以填补淡入和淡出之间的空白)，保持5.2到10.2s，然后开始从10.2淡入到10.6s
3. 图像3首先隐藏起来，从10.4s渐渐消失到10.8s，从10.8s渐隐到15.8s，然后从15.8s渐渐消失到16.2s
4. (图1返回的逻辑类似，一直循环直到计时器被清除)

如何调整代码以使其按说明工作?

How can I adjust the code to make this working as described?

推荐答案

实时演示

如果使用2个DIV元素，则可以淡化内部的DIV元素:

If you use 2 DIV elements you can fade the inner one:

<div id="bg2"><div id="bg1"></div></div>

仅此而已:

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
    n = images.length,
    c = 0,
    $1 = $('#bg1'),
    $2 = $('#bg2');

$.fn.setBG = function(){
  return this.css({backgroundImage: "url(images/"+ images[c] +")"});
};

(function loop(){
  $1.setBG().fadeTo(0,1).delay(2000).fadeTo(1000, 0, loop);
  c = ++c%n;
  $2.setBG();
})();

这是如何工作的:

#bg1:      set1 -- fadeOut -- set2 -- fadeOut -- set3 -- fadeOut -- set1 - ...
#bg2:      - set2 ------------- set3 ------------- set1 ------------- set2 ...

这篇关于使用jQuery fadeIn()和fadeOut()隔行扫描背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！