My goal is to transition buttons from opacity 0 to opacity 1 with a delay, but I am facing an issue. Some of these buttons have the "selected" class which gives them an opacity of 0.35. However, when the transition starts, the buttons with the "selected" class are already visible instead of fading from opacity 0 to 0.35 like the other buttons fade from opacity 0 to 1. Is there a way to achieve this desired effect or should I consider using a different approach for the "selected" class?
var fade_arr = []
var btns = $('.a').each(function() {
fade_arr.push($(this))
})
var p = 0,
len = fade_arr.length,
z;
for (z = 0; z < len; z++) {
setTimeout(function() {
fade_arr[p].addClass('visible');
p++;
}, 50 + (z * 50));
}.a {
width: 100px;
height: 20px;
float: left;
margin: 5px;
background: #999;
opacity: 0;
transition: opacity 1s;
}
.a.selected {
opacity: 0.35;
}
.visible {
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a selected"></div>
<div class="a selected"></div>
</div>