onclick显示div，几秒后隐藏我显示的div

我需要一些帮助，我的按钮。我想当我点击按钮（点击我）隐藏的div应该显示，但几秒钟后，我隐藏的div自动隐藏。谢谢！！onclick显示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>

来源

2014-03-03 user2990762

由于我的答案是相同的，所以只添加演示链接。 http://jsfiddle.net/k2Ggx/1/ – Neha

非常感谢你Neha它完美地为我工作。 – user2990762

很高兴帮助:)！ – Neha

可以使用setTimeout功能如下：

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

这将在1秒钟后执行的功能。

如果你想使用jQuery，您可以使用.delay()功能如下： $(element).show().delay(1000).hide();

更多信息：

来源

2014-03-03 09:37:45 MysticEarth

你想要的setTimeout（）函数

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

来源

2014-03-03 09:39:56

setTimeout只是普通的JavaScript – MysticEarth

你是对的，编辑heh –

简单使用setTimeout来执行延时操作。

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

JSFiddle

我之所以用setTimeout(..)一个变量timeOut：在未来，你可能需要取消此超时操作，这是可以做到clearTimeout(timeOut)

来源

2014-03-03 09:42:26 Praveen

在你ShowSecond功能做以下

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

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

来源

2014-03-03 09:44:02 Blu

非常感谢你，Blu Angel对我来说很完美。 – user2990762

@ user2990762欢迎 – Blu

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

HTML

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

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会自动处理这些事情。

来源

2014-03-03 11:28:21

非常感谢您对我的建议。 :) – user2990762

onclick显示div，几秒后隐藏我显示的div

回答

相关问题