Question

我正在li元素中创建一个动态ID，我想定位每个ID，以便我可以设置不透明度的动画。我设置了一个变量“_Btn”来控制日志记录每个id的值，返回正确的id名称，但是当我尝试在jquery中定位ID时，它不会为不透明度设置动画。我怎么做错了如何在jquery中定位每个ID？

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
  });
}
}

Answer 1

我猜你创建的<li>是不可见的，然后想要使用animate()让它们顺利可见。因此，hideThumbs类更有可能设置为display: none;：这样，更改opacity无效，元素将保持不可见。

相反，你的CSS应该是：

.hideThumbs {
    opacity: 0;
}

除上述内容外，请注意：

opacity: 100没有意义（虽然它会起作用）;值介于0（不可见）和1（完全可见）之间。
您最好在创建var _btn = btnInfo[i].id;之前写下<li>，这样您就可以使用btn而不是btnInfo[i].id。

在jQuery中定位动态ID

1 个答案: