Question

我曾使用SetInterval jquery函数添加少量图像的幻灯片。图像存储在一个数组中，每个图像的显示时间间隔也存储在一个数组中。代码正常工作，但我想要为每个具有持续时间和不透明度的图像添加fadeIn和FadeOut，如何才能完成。使用的代码是

  //timearray- is array storing time for each image
  //imagearray- is array storing each image source
  //image_div-is div tag in which images are displayed
  // total 5 images -so used count inside setInterval

function imageshow() {
    var imgfade = setInterval(function () {
        $("#img_div").css("background", "url('" + imagearray[count] + "')");
        clearInterval(imgfade);
        if (count < 4) {
            count++;
        } else {
            count = 0;
        };
        imageshow()
    }, timearray[count]);
}

imageshow();

我需要为每张图片使用fadeIn和FadeOut。

Answer 1

你不能使用，我想你也可以设置动画，持续时间和不透明度。

http://api.jquery.com/fadeIn/和http://api.jquery.com/fadeOut/

Answer 2

假设您希望在淡入下一张图像之前淡出当前图像，请替换此行：

$("#img_div").css("background", "url('" + imagearray[count] + "')");

使用：

var $imgDiv = $("#img_div");
$imgDiv.fadeOut("fast", function () {
    $imgDiv.css("background", "url('" + imagearray[count] + "')").fadeIn("fast");
});

Answer 3

根据澄清问题的评论，看起来fadeTo是您想要的功能。 http://api.jquery.com/fadeTo/

为div标签中的图像提供fadeIn和FadeOut

3 个答案: