將div設置為隱藏，然后在延時后可見

Question

我試圖在X時間后（也許甚至在隨機時間后，在黑色背景上出現一個黃色方塊），但現在讓我們做固定時間）。

 function initialSetup() { if (document.getElementById("yellow") != null) { document.getElementById('yellow').style.visibility = 'hidden'; setTimeout("document.getElementById('yellow').style.visibility = 'visible'", 2000); }

 .box { width: 50px; height: 50px; } .yellow { background: yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body { background-color: black; }

 <div id="yellow" class="box yellow"></div>

此代碼應首先隱藏黃色方塊，然后在2秒鍾后將其顯示出來。 但這行不通。 當我嘗試使用按鈕來啟動javascript函數時，它也不起作用。 我看了其他示例，並將我的代碼與他們的代碼進行了比較，看來它應該可以工作！

https://jsfiddle.net/xxPoLyGLoTxx/51spg8d1/

Answer 1

首先，您的語法缺少} 。 其次，要遵循最佳實踐，應為setTimeout提供函數參考。 您當前通過eval()運行的當前代碼，應該不惜一切代價避免。 第三，您需要使用backgroundColor而不是color來設置元素背景。 最后，您不會在任何地方調用intitialSetup() 。 考慮到這些問題，請嘗試以下操作：

 function initialSetup() { if (document.getElementById("yellow") != null) { document.getElementById('yellow').style.backgroundColor = 'black'; setTimeout(function() { document.getElementById('yellow').style.backgroundColor = 'yellow' }, 2000); } } initialSetup();

 .box { width: 50px; height: 50px; } .yellow { background: yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body { background-color: black; }

 <div id="yellow" class="box yellow"></div>

請注意，按照這種邏輯，您並沒有將黃色div隱藏起來-正如您的標題所暗示的。 由於您已更改其背景顏色以匹配body的黑色背景，因此它並不是立即顯而易見的。 如果要使元素完全不可見，請使用display屬性。 您還可以在CSS中進行設置，以避免在頁面加載時出現FOUC：

 function initialSetup() { if (document.getElementById("yellow") != null) { setTimeout(function() { document.getElementById('yellow').style.display = 'block'; }, 2000); } } initialSetup();

 .box { width: 50px; height: 50px; } .yellow { background: yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } body { background-color: black; }

 <div id="yellow" class="box yellow"></div>

最后，這是上述的jQuery實現，因為您已將問題標記為這樣：

 $(function() { setTimeout(function() { $('#yellow').show() }, 2000); });

 .box { width: 50px; height: 50px; } .yellow { background: yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } body { background-color: black; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="yellow" class="box yellow"></div>

Answer 2

setTimeout（）語法

setTimeout()函數實際上期望將一個函數傳遞給它，而不是一個字符串：

setTimeout(function(){
   document.getElementById('yellow').style.visibility = 'visible'; 
}, 2000);

另外，您可以考慮只應用CSS樣式來處理默認情況下隱藏的CSS樣式（即display: none ），然后僅在setTimeout()函數調用的正文中顯示它，而不是通過Javascript將其隱藏。

例

 function initialSetup() { if (document.getElementById("yellow") != null) { document.getElementById('yellow').style.visibility = 'hidden'; setTimeout(function() { document.getElementById('yellow').style.visibility = 'visible'; }, 2000); } } initialSetup();

 .box { width: 50px; height: 50px; } .yellow { background: yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body { background-color: black; }

 <body> <div id="yellow" class="box yellow"></div> </body>

Answer 3

嘗試這個

function initialSetup() {
            if (document.getElementById("yellow") !== null) {
                document.getElementById('yellow').style.visibility = 'hidden';
                setTimeout(function () {
                    document.getElementById('yellow').style.visibility = 'visible';
                }, 2000);
            }
        }

將div設置為隱藏，然后在延時后可見

問題描述

3 個解決方案

解決方案1
3 已采納 2017-02-14 14:17:06

解決方案2
2 2017-02-14 14:16:42

解決方案3
0 2017-02-14 14:32:25

將div設置為隱藏，然后在延時后可見

問題描述

3 個解決方案

解決方案1 3 已采納 2017-02-14 14:17:06

解決方案2 2 2017-02-14 14:16:42

解決方案3 0 2017-02-14 14:32:25

解決方案1
3 已采納 2017-02-14 14:17:06

解決方案2
2 2017-02-14 14:16:42

解決方案3
0 2017-02-14 14:32:25