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.如果您希望框中有空格，则可以使用{{1 }或visibility: hidden。如果您使用后者并将CSS opacity: 0添加到元素中，则可以使其淡入。

transition: opacity .2s ease

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

1 个答案: