javascript - 如何使用纯javascript添加延迟来隐藏/显示div

Question

我使用如下 jquery 脚本来隐藏和显示 div，延迟时间为毫秒:

function slideonlyone(thechosenone) {
 $('.newboxes2').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).slideDown(200);
      }
      else {
           $(this).slideUp(600);
      }
 });
}

如何用纯 JavaScript 实现这个结果？这是我目前的代码:

 function showonlyone(thechosenone) {
  var newboxes = document.getElementsByTagName("div");
        for(var x=0; x<newboxes.length; x++) {
              name = newboxes[x].getAttribute("class");
              if (name == 'newboxes') {
                    if (newboxes[x].id == thechosenone) {
                    newboxes[x].style.display = 'block';
              }
              else {
                    newboxes[x].style.display = 'none';
              }
        }
  }
}

Answer 1

jQuery slideDown 效果并不像普通 JavaScript 中那么简单，但您可以轻松设置任何 CSS 属性。

display: none 会让盒子看起来好像不存在，并且它的宽度和高度将等于0。如果你想让盒子所在的地方有一个空白区域，你可以可以使用visibility:hidden或opacity:0。如果您使用后者并向元素添加 CSS transition: opacity .2s escape ，则可以使其淡入。

function showOnlyOne(theChosenOne) {
  var newBoxes = document.querySelectorAll('div.newboxes');
  for (var i = 0, len = newBoxes.length; i < len; ++i) {
    var box = newBoxes[i];
    if (box.id === theChosenOne) {
      box.style.display = 'block';
    } else {
      box.style.display = 'none';
    }
  }
}