Two images are present, with the first one having the class "opacityOne". When a button is clicked, based on the variable index, I want the current image to fade in while the other fades out.
It works well when I remove the "opacityOne" class from one image and add it to another. However, when I try to remove and add the "opacityOne" class to the same element, I do not see the fading effect occur. I thought using transition would solve this, as I am removing and adding a class to the element, but it is not working as expected.
How can I make the same element fade in and out by removing and adding its class?
HTML:
<div class="sideImgContainer">
<div class="imgs clearfix">
<img src="pics/pcfullimage.png" class="firstImg opacityOne"/>
<img src="pics/sideimage3.png" class="secondImg"/>
</div>
</div>
CSS:
.sideImgContainer img{
transition: all 1.2s;
opacity: 0;
}
.sideImgContainer .opacityOne{
opacity: 1;
}
jQuery:
prevBut.click(moveSlide);
nextBut.click(moveSlide);
function moveSlide(){
secondImg.removeClass("opacityOne");
firstImg.removeClass("opacityOne");
if(index === 2 || index === 0){
firstImg.addClass("opacityOne");
}
else{
secondImg.addClass("opacityOne");
}
}