Question

我的按钮需要一些帮助。我想当我点击按钮（点击我）时，隐藏的div应该显示但是几秒钟后我隐藏的div会自动隐藏。谢谢!!

这里的代码是：

<!DOCTYPE html>
<html>
<head>
  <style>
    .show {
         -o-transition: opacity 3s;
         -moz-transition: opacity 3s;
         -webkit-transition: opacity 3s;
         transition: opacity 3s;
      opacity:1;
    }
    .hide{  opacity:0; }
  </style>
  <script>
    function ShowSecond()
    {
      var div2 = document.getElementById("div2");
      div2.className="show";
    }
  </script>
</head>
<body>
<div id="div1" class="show">
  First Div
  <button onclick="ShowSecond()">clickMe</button>
  </div>
  <div id="div2" class="hide">
    Hidden Div
  </div>
</body>
</html>

Answer 1

您可以使用setTimeout功能：

setTimeout(function() { // your code here }, 1000);

这将在1秒后执行该功能。

如果您想使用jQuery，可以使用.delay()函数： $(element).show().delay(1000).hide();

更多信息： https://api.jquery.com/delay/

Answer 2

你想要setTimeout（）函数

setTimeout(function() {
  // Do something after 5 seconds
}, 5000);

Answer 3

只需使用setTimeout执行延时操作。

function ShowSecond() {
    var div2 = document.getElementById("div2");
    div2.className = "show";
    var timeOut = setTimeout(function () {
        div2.className = "hide";
    }, 2000);
}

JSFiddle

我将setTimeout(..)用于变量timeOut的原因：将来您可能需要取消此超时操作，可以clearTimeout(timeOut) < / p>

Answer 4

在ShowSecond功能中执行以下操作

 function ShowSecond()
 {
     var div2 = document.getElementById("div2");
     div2.className="show";
     setTimeout(function() {
        div2.className="hide";
     }, 3000);
 }

根据以上代码，您div将在3s之后隐藏。时间是你选择增加或减少的要求

Answer 5

您还可以使用CSS3 animation代替transition： running demo

HTML

<button onclick="animate()">clickMe</button>
<div id="hiddenDiv1" class="hideOnStart">
    Hidden Div
</div>

JS

function animate() {
    var s = document.getElementById("hiddenDiv1").style;
    s.animationName = 'showAndHide';
    s.animationDuration = '3s';
}

CSS

@keyframes showAndHide {
      0% { opacity: 0; }
     50% { opacity: 1; }
    100% { opacity: 0; }    
}

.hideOnStart{
    opacity: 0;
}

显然它需要以跨浏览器为前缀，而普通的JavaScript只是坚持你的代码，使用jQuery会自动处理这些事情。

Answer 6

如果您使用的是Bootstrap CSS，并且希望普通的javascript调用此事件，则可以使用以下功能：

document.body.addEventListener('click', function (evt) {
    if (evt.target.className === 'YOUR_CLASS_NAME') {
        var div2 = document.getElementById("ID_FOR_DIV");
        div2.className = "d-block";
        setTimeout(function() {
         div2.className="d-none";
        }, 6000);
    }
}, false);

或者，如果您不使用引导程序，则可以使用

document.body.addEventListener('click', function (evt) {
    if (evt.target.className === 'YOUR_CLASS_NAME') {
        var div2 = document.getElementById("ID_FOR_DIV");
        div2.style.display= 'block';
        setTimeout(function() {
         div2.style.display = 'none';
        }, 6000);
    }
}, false);

onclick显示div并在几秒钟后隐藏我显示的div

6 个答案: