jquery fadeIn/Out，自定义幻灯片放映故障，淡入淡出内存?淡入淡出队列

jquery fadeIn/Out, custom slideshow glitches, fade memory? fade queue?

本文关键字：淡入 淡出 故障 内存 队列 fadeIn Out 自定义 幻灯片 jquery      更新时间：2023-10-31

我正在制作一个背景img幻灯片，遇到了无法理解的小故障。

我有几个包含图像列表的对象。我有两个函数，它们将获取这些图像，每个创建一个div，并添加img作为这些div的背景，所有这些都在一个容器中。

然后，如本网站所述，我淡出第一个div，在第二个div中淡出，然后将第一个子元素移动到最后一个子元素的位置，然后循环，创建幻灯片效果。

当我想要这个时，我清空（）容器。然后，该过程可以使用相同或另一个对象重新开始。

我第一次这样做是有效的，但第二次，第三次。。。有时，它开始出现故障。不仅有两个，而且所有的div都开始淡出，因为我不知道是什么原因

即使我在第一、第二、第三。。。尝试。

看起来好像尽管div从DOM中被删除了，但显然还有它们的一些内存？这是否与创建的div与以前创建的div共享名称有关？也许fadein-out保留了某种我不知道的内部队列？

这是JsFidle:

https://jsfiddle.net/93h51k9m/11/

代码：

$(document).ready(function(){ 
var imgObject = {
imgs: ['http://lorempixel.com/400/200/sports/1/','http://lorempixel.com/400/200/sports/2/','http://lorempixel.com/400/200/sports/3/']
};
var imgObject2 = {
imgs: ['http://lorempixel.com/400/200/sports/4/','http://lorempixel.com/400/200/sports/5/','http://lorempixel.com/400/200/sports/6/']
};
var noImgObject = {
};
function prepare(index) {
  if ($("#cover").css("display") != "none") {
            console.log("cover is visible: hide it first");
        console.log("fadeOut cover in 3000ms");
        $("#cover").fadeOut(3000, function() {
      console.log("then empty cover")
      $("#cover").empty();
      console.log("now for the images")
      roll(index);
    });
  } else {
    console.log("cover is already hidden: now for the images");
    roll(index);
  };
};
function roll(index) {
  if (typeof index.imgs != "undefined") {
        console.log("called object has images")
        console.log("get them and their numbers")
    var imgs = index.imgs;
    var imgsLength = imgs.length;
    console.log("create as many divs as imgs, and place each img as bg in each div")
    for (i = 0; i < imgsLength; i++) {
      $("#cover").append("<div class='imgdiv" + i + "'></div>");
      $(".imgdiv" + i).css("background-image", "url('"+imgs[i]+"')");
    };
        console.log("now hide all but first div, fadeIn cover and start the carousel");
    //as seen at http://snook.ca/archives/javascript/simplest-jquery-slideshow
    $('#cover').fadeIn(3000);
    $('#cover div:gt(0)').hide();
    setInterval(function() {
        console.log("fade and swap")
      $('#cover :first-child').fadeOut(3000)
        .next('div').fadeIn(3000)
        .end().appendTo('#cover')
    }, 6000);
  } else {
    console.log("index has no images, nothing to do");
  };
};
$("#imgobj").click(function(){
    console.log("imgObject called");
    prepare(imgObject);
});
$("#imgobj2").click(function(){
    console.log("imgObject2 called");
    prepare(imgObject2);
});
$("#noimgobj").click(function(){
    console.log("noImgObject called");
    prepare(noImgObject);
});
});

感谢

每次调用click事件时，都会启动另一个间隔，这就是为什么在queue 中添加操作

使用global变量，该变量将在每次启动新Interval时保存setInterval实例和clear实例。

var interval;
$(document).ready(function() {
  var imgObject = {
    imgs: ['http://lorempixel.com/400/200/sports/1/', 'http://lorempixel.com/400/200/sports/2/', 'http://lorempixel.com/400/200/sports/3/']
  };
  var imgObject2 = {
    imgs: ['http://lorempixel.com/400/200/sports/4/', 'http://lorempixel.com/400/200/sports/5/', 'http://lorempixel.com/400/200/sports/6/']
  };
  var noImgObject = {};
  function prepare(index) {
    clearInterval(interval);
    if ($("#cover").css("display") != "none") {
      console.log("cover is visible: hide it first");
      console.log("fadeOut cover in 3000ms");
      $("#cover").fadeOut(3000, function() {
        console.log("then empty cover")
        $("#cover").empty();
        console.log("now for the images")
        roll(index);
      });
    } else {
      console.log("cover is already hidden: now for the images");
      roll(index);
    };
  };
  function roll(index) {
    if (typeof index.imgs != "undefined") {
      console.log("called object has images")
      console.log("get them and their numbers")
      var imgs = index.imgs;
      var imgsLength = imgs.length;
      console.log("create as many divs as imgs, and place each img as bg in each div")
      for (var i = 0; i < imgsLength; i++) {
        $("#cover").append("<div class='imgdiv" + i + "'></div>");
        $(".imgdiv" + i).css("background-image", "url('" + imgs[i] + "')");
      };
      console.log("now hide all but first div, fadeIn cover and start the carousel");
      //as seen at http://snook.ca/archives/javascript/simplest-jquery-slideshow
      $('#cover').fadeIn(3000);
      $('#cover div:gt(0)').hide();
      interval = setInterval(function() {
        console.log("fade and swap")
        $('#cover :first-child').fadeOut(3000)
          .next('div').fadeIn(3000)
          .end().appendTo('#cover')
      }, 6000);
    } else {
      console.log("index has no images, nothing to do");
    };
  };
  $("#imgobj").click(function() {
    console.log("imgObject called");
    prepare(imgObject);
  });
  $("#imgobj2").click(function() {
    console.log("imgObject2 called");
    prepare(imgObject2);
  });
  $("#noimgobj").click(function() {
    console.log("noImgObject called");
    prepare(noImgObject);
  });
});
html {
  color: black;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #f7fafa;
}
* {
  box-sizing: border-box;
}
button {
  cursor: pointer;
}
#buttons {
  z-index: 1000;
}
#cover {
  display: none;
  position: fixed;
  top: 5vh;
  left: 0;
  width: 100vw;
  height: 95vh;
  opacity: 0.5;
  z-index: 0;
}
#cover div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="buttons">
  <button id="imgobj">imgObject</button>
  <button id="imgobj2">imgObject2</button>
  <button id="noimgobj">noImgObject</button>
</div>
<div id="cover"></div>

相关文章：