为什么我的图像不会淡入淡出？

Question

所以我目前正在 jQuery 进行幻灯片放映项目，其中图像会淡入淡出。问题是这只适用于我的 KhanAcademy project, and not on my CodePen - Pen.

有人可以在我的 CodePen 上告诉我这个问题吗？谢谢！

代码：

var slideShow = function(container, time, effect) {
  container = document.querySelector(container);
  this.images = [];
  this.curImage = 0;

  if (effect === "fade") {
    for (i = 0; i < container.childElementCount; i++) {
      this.images.push(container.children[i]);
      this.images[i].style.opacity = 0;
    }

    // Handle going to to the next slide
    var nextSlide = function() {
      for (var i = 0; i < this.images.length; i++) {
        if (i != this.curImage) this.images[i].style.opacity = 0;
      }
      this.images[this.curImage].style.opacity = 1;
      this.curImage++;
      if (this.curImage >= this.images.length) {
        this.curImage = 0;
      }
      window.setTimeout(nextSlide.bind(document.getElementById(this)), time);
    };
    nextSlide.call(this);
  } else if (effect === "clickFade") {
    for (i = 0; i < container.childElementCount; i++) {
      this.images.push(container.children[i]);
      this.images[i].style.opacity = 0;
    }

    // Handle going to to the next slide
    var nextSlideClick = function() {
      for (var i = 0; i < this.images.length; i++) {
        if (i != this.curImage) this.images[i].style.opacity = 0;
      }
      this.images[this.curImage].style.opacity = 1;
      this.curImage++;

      if (this.curImage >= this.images.length) {
        this.curImage = 0;
      }
      window.setTimeout(nextSlideClick.bind(document.getElementById(this)), time);
    };
    nextSlideClick.call(this);
  }

};
slideShow(".slideshow", 2000, "fade");

h1 {
  font-family: 'Montserrat', sans-serif;
}

.slide {
    transition: opacity 0.5 s;
    position: absolute;
    top: 1;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<h1>Exatreo.js - Slideshow library</h1>

<div class="slideshow">
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />

</div>

Answer 1

如果你用 the validator 检查你的 css 你会得到这个错误：

0.5 is not a transition value : opacity 0.5 s

您可以看到 0.5 和 s 之间有一个 space。
删除此 space 它将按预期工作。

var slideShow = function(container, time, effect) {
  container = document.querySelector(container);
  this.images = [];
  this.curImage = 0;

  if (effect === "fade") {
    for (i = 0; i < container.childElementCount; i++) {
      this.images.push(container.children[i]);
      this.images[i].style.opacity = 0;
    }

    // Handle going to to the next slide
    var nextSlide = function() {
      for (var i = 0; i < this.images.length; i++) {
        if (i != this.curImage) this.images[i].style.opacity = 0;
      }
      this.images[this.curImage].style.opacity = 1;
      this.curImage++;
      if (this.curImage >= this.images.length) {
        this.curImage = 0;
      }
      window.setTimeout(nextSlide.bind(document.getElementById(this)), time);
    };
    nextSlide.call(this);
  } else if (effect === "clickFade") {
    for (i = 0; i < container.childElementCount; i++) {
      this.images.push(container.children[i]);
      this.images[i].style.opacity = 0;
    }

    // Handle going to to the next slide
    var nextSlideClick = function() {
      for (var i = 0; i < this.images.length; i++) {
        if (i != this.curImage) this.images[i].style.opacity = 0;
      }
      this.images[this.curImage].style.opacity = 1;
      this.curImage++;

      if (this.curImage >= this.images.length) {
        this.curImage = 0;
      }
      window.setTimeout(nextSlideClick.bind(document.getElementById(this)), time);
    };
    nextSlideClick.call(this);
  }

};
slideShow(".slideshow", 2000, "fade");

h1 {
  font-family: 'Montserrat', sans-serif;
}

.slide {
    transition: opacity 0.5s;
    position: absolute;
    top: 1;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<h1>Exatreo.js - Slideshow library</h1>

<div class="slideshow">
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
    <img class="slide" src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />

</div>

为什么我的图像不会淡入淡出？

Why won't my images fade in and out?

javascript

performance

slideshow

codepen