请查看此代码段

Question

我已经编写了一个清空div的函数，并使用jQuery中的setInterval函数每六秒从unsplash.com插入一个随机图像。我想使用fadeIn和fadeOut函数来平滑过渡，但是无法成功实现它。以下是我的代码：

function playImageSlideshow() {
  $("#image-slideshow").removeClass("display-none");
  $("#images").append("<img src = 'https://source.unsplash.com/" + currentCity + "'>");
  setInterval(function() {
    var date = new Date();
    $("#images").empty();
    $("#images").append("<img src = 'https://source.unsplash.com/" + currentCity + "/?" + date.getTime() + "'>");
  }, 6000);
}

Answer 1

使用jQuery中的函数fadeIn。

首先创建img元素，如下所示：

var $img = $("<img class='hide' src = 'https://source.unsplash.com/" + currentCity + "/?" + date.getTime() + "'>");

然后，调用faIn函数：

$img.fadeIn()

使用类img创建hide以隐藏它，然后执行fadeIn效果。另一种方法是在将新元素追加到hide()之前执行DIV函数，即：$img.hide()。

请查看此代码段

＆＃13;

let currentCity = 'london';

function playImageSlideshow() {
  $("#image-slideshow").removeClass("display-none");
  $("#images").append("<img src = 'https://source.unsplash.com/" + currentCity + "'>");
  setInterval(function() {
    var date = new Date();

    var $images = $("#images");
    $("#images img").fadeOut(1000, function() {
      $images.empty();

      var $img = $("<img class='hide' src = 'https://source.unsplash.com/" + currentCity + "/?" + date.getTime() + "'>");
      $images.append($img);

      $img.fadeIn(2000);
    });
  }, 3000);
}

playImageSlideshow();

＆＃13;

.hide {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='images'></div>

＆＃13;

请参阅？现在过渡更加顺畅。

资源

Answer 2

只需使用JQuery API并更新setTimeout中的图像。

myservice install

setInterval(function() {
  $("#images").fadeOut(1000);
  $("#images").attr("src", "https://i2.wp.com/www.monicaperezcounseling.com/wp-content/uploads/2017/01/pexels-source-unsplash-4.jpg");
  $("#images").fadeIn(1000);
}, 2000);

在搜索间隔函数中淡入和淡出

2 个答案:

请查看此代码段

资源