I am currently working on creating dynamic IDs within an li element and my goal is to target each ID in order to animate the opacity. I have set up a variable "_Btn" to log the value of each ID, which returns the correct ID names. However, when attempting to target the ID in jQuery for opacity animation, it does not work as expected. Can someone please advise me on what I may be doing wrong and how to correctly target each ID using jQuery?
var btnInfo = [{
img: 'images/thumbs/motionGraphicsThumb1.jpg',
id: 'btn1',
title: 'TITLE1',
url: 'folio/pg1.html'
}, {
img: 'images/thumbs/motionGraphicsThumb2.jpg',
id: 'btn2',
title: 'TITLE2',
url: 'folio/pg2.html'
}, {
img: 'images/thumbs/motionGraphicsThumb3.jpg',
id: 'btn3',
title: 'TITLE3',
url: 'folio/pg3.html'
}];
for (var i = 0; i < btnInfo.length; i++) {
$('.thumbWrapper .container ul').append('<li class="hideThumbs" id="' + btnInfo[i].id + '" onclick="contentLoader(\'' + btnInfo[i].url + '\')"><div class="view view-tenth"><img src="' + btnInfo[i].img + '"><div class="mask"><h2>' + btnInfo[i].title + '</h2></div></div></li>');
var _btn = btnInfo[i].id;
console.log("BTN ID " + _btn);
$("#" + _btn).animate({
opacity: 100
});
}
}