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

时间:2016-04-01 05:27:23

标签: javascript jquery fadein fadeout

我正在构建一个背景img幻灯片,并且遇到了我无法理解的故障。

我有几个包含图像列表的对象。我有两个函数可以拍摄这些图像,每个图像创建一个div,并添加imgs作为这些div的背景,所有这些都在一个容器中。

然后,如this website中所述,我淡出第一个div,然后淡出第二个div,然后将第一个孩子移动到最后一个子位置,然后循环,创建幻灯片效果。

当我希望这个超过i .empty()容器时。然后,该过程可以使用相同或另一个对象重新开始。

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

即使我在第一次,第二次,第三次尝试中使用相同的对象,也会发生这种情况。

看起来虽然div已经从DOM中删除了,但显然它们有一些记忆?是否与创建的div与以前创建的div共享名称这一事实有关?也许fadein out保留一些我不知道的内部队列?

这是一个JsFiddle:

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);
});

});

谢谢

1 个答案:

答案 0 :(得分:0)

  

每次调用click事件时,都会启动另一个间隔,这就是原因,操作会附加在queue

每次启动新的Interval时,都会使用global变量来保存setInterval实例和clear

&#13;
&#13;
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);
  });

});
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;