javascript - 使用 javascript 显示/隐藏 <div>

Question

例如，我有一个名为 showcontainer 的函数。当我单击激活它的按钮时，我需要某个 div 元素，在本例中 <div id="container"> ，淡入。当我再次单击它时，淡出。 我如何实现这一目标？

注意:我不习惯 jQuery。

Answer 1

所以你得到了一堆 jQuery 答案。没关系，我也倾向于使用 jQuery 来做这类事情。但用纯 JavaScript 做到这一点并不难，只是更加冗长:

var container = document.getElementById('container');
var btn = document.getElementById('showcontainer');

btn.onclick = function() {

    // Fade out
    if(container.style.display != 'none') {
      var fade = setInterval(function(){
        var opacity = parseFloat(container.style.opacity);
        opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
        opacity -= 5;
        container.style.opacity = opacity/100;
        if(opacity <= 0) {
          clearInterval(fade);
          container.style.opacity = 0;
          container.style.display = 'none';
        }
      }, 50);

    // Fade in
    } else {
      container.style.display = 'block';
      container.style.opacity = 0;
      var fade = setInterval(function(){
        var opacity = parseFloat(container.style.opacity);
        opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
        opacity += 5;
        container.style.opacity = opacity/100;
        if(opacity >= 100) {
          clearInterval(fade);
          container.style.opacity = 1;
        }
      }, 50);
    }

};

检查working demo .