Question

我希望在2-3秒延迟后“显示”隐藏的div。是否可以在相同的JavaScript中？请帮帮我.......

我使用了以下代码：

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

.show {
      -o-transition: opacity 3s;
      -moz-transition: opacity 3s;
      -webkit-transition: opacity 3s;
      transition: opacity 3s;
      opacity:1;
  }
  .hide {
      opacity:0;
  }

<!DOCTYPE html>
<html>
    
    <head>
        <style>
</style>
        <script>
            
        </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>

我希望在2-3秒延迟后“显示”隐藏的div

Answer 1

/ * 1.首先，您必须实现文档就绪功能

然后通过（xxxx）ms延迟函数执行

$（document）.ready（function（）{ setTimeout（function（）{ //你想要什么哟延迟 }，xxxx）; }）; * /

或者你会在这里找到Answer

Answer 2

在show class

中使用css属性 transition-delay：3s;

Answer 3

如果你想要转换，你将不得不使用某种css转换（或很多的javascript调用，如果你的浏览器不支持转换）。

这是一个迷你示例，如何仅使用javascript执行转换
此类转换的速度和持续时间必须在间隔（此处为250 ms）和不透明度步长（此处为0.1）中完成 （使用此设置，显示div的持续时间约为 2.5秒，因为250ms * 10 = 2.5s

＆＃13;

function startShowing(){
  var elementToHide = document.getElementById("show");
  elementToHide.style.opacity = 0;
  var intervalId = setInterval(function(){
    if(elementToHide.style.opacity >= 1)
    {
      clearInterval(intervalId);
    }else{
      elementToHide.style.opacity = parseFloat(elementToHide.style.opacity) + 0.1;
    }
  },250);
}

//startShowing();

＆＃13;

.hide{
opacity:0;
}

＆＃13;

<div class="hide" id="show"> show me </div>
<button onclick="startShowing()"> SHOW </button>

＆＃13;

如果您有其他意思，请更详细地说明您的问题。

OLD答案，可能不是预期的解决方案

将hide css类设置为div时，只需添加 加号和空间

使用其他字词将此div2.className = 'hide';更改为此div2.className += ' hide';。像这样，两个类都在div上设置，但不透明度值被最后添加的类重写

＆＃13;

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

＆＃13;

.show {
      -o-transition: opacity 3s;
      -moz-transition: opacity 3s;
      -webkit-transition: opacity 3s;
      transition: opacity 3s;
      opacity:1;
  }
  .hide {
      opacity:0;
  }

＆＃13;

<!DOCTYPE html>
<html>
    
    <head>
        <style>
</style>
        <script>
            
        </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>

＆＃13;

像这样，节目的转换仍然有效，只有不透明度被覆盖。

Answer 4

试试这个：

function ShowSecond（）{

    setTimeout(function () {
        document.getElementById("div2").style.visibility = "hidden";
    }, 2000);
}

Answer 5

您是否曾尝试使用所需的延迟创建另一个功能来调用您的功能？

function ClickShowSecond(){
    setTimeout(ShowSecond, 2000);
}

Answer 6

只需添加一个setTimeout并相应地添加延迟。

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

.show {
      -o-transition: opacity 3s;
      -moz-transition: opacity 3s;
      -webkit-transition: opacity 3s;
      transition: opacity 3s;
      opacity:1;
  }
  .hide {
      opacity:0;
  }

<!DOCTYPE html>
<html>
    
    <head>
        <style>
</style>
        <script>
            
        </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 7

setTimeout(function () {
        div2.className = 'hide';
        setTimeout(showDiv,3000);
    }, 2000);

function showDiv(){
    var div2 = document.getElementById("div2");
    div2.className = 'show';
}

Answer 8

这适用于我，你可以把功能放在按钮触发器或页面加载时

// set this SetTimeout to your event trigger or in document ready 

setTimeout(showsomething, 3000);

function showsomething() {
//make your div or element being show here
}

如何使用Javascript添加延迟来显示div？

8 个答案: