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

回答

相關問題