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

Question

所以，我目前正在jQuery中的幻灯片项目工作，图像会淡入和淡出。问题是，这只适用于我的KhanAcademy project，而不是我的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。
删除此空间，它将按预期工作。

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>