Currently, I'm facing an issue with a website that I'm working on. I have created a function that should add a specific class to different ids in order to make images fade out one by one on the home page. To streamline the process, I used a local variable 'a' to easily code for the different ids without having to create separate functions. However, I'm running into difficulties when using setTimeout. It seems that I can't get setTimeout to work properly. Any assistance with this matter would be greatly appreciated. The classes are being added to the ids successfully; my struggle lies with the setTimeout function. I've tried various methods that I found online, but I'm having trouble grasping them. Below is the code snippet:
window.onload;
var fetchOne =document.getElementById('picOne');
console.log(fetchOne);
var fetchTwo =document.getElementById('picTwo');
var fetchThree =document.getElementById('picThree');
function AttachClass (a){
a.className ='opacity';
}
setTimeout(AttachClass.bind(null,a),8000);
AttachClass (fetchOne);
AttachClass (fetchTwo);
AttachClass (fetchThree);
#picOne{
opacity: 1;
transition: opacity 2s ease-in-out
}
#picOne.opacity{
opacity: 0;
}
#picTwo{
opacity: 1;
z-index: -1;
transition: opacity 2s ease-in-out
}
#picTwo.opacity{
opacity: 0;
}
#picThree{
opacity: 1;
z-index: -2;
transition: opacity 2s ease-in-out
}
#picThree.opacity{
opacity: 0;
}
<div class="landscape_pics">
<img id="picOne" src="media/Photographs/BK3U8791.JPG">
<img id="picTwo" src="media/Photographs/2014Feb%20-%20Vacation%20-%20Sao%20Paulo%20-%200071a.jpg">
<img id="picThree" src="media/Photographs/2014Aug06%20-%20Stadium%20-%20001.JPG">
</div>