使用延遲Javascript刪除DIV
[英]Remove a DIV with a delay Javascript
問題描述
這是我的第一個問題，如果我不采用正確的禮儀，請原諒我。
我有一個javascript函數隱藏div淡入淡出。
function fadeOut(cloudChatHide)
{
"use strict";
cloudChatHide.onclick = function()
{
if(cloudChatHide.className)
{
cloudChatHide.className = '';
}
else
{
cloudChatHide.className = 'fadeout';
RemoveCloudChat();
}
};
}
但是，此代碼不會刪除作為RemoveCloudChat函數的DIV。 看起來像這樣： -
function RemoveCloudChat()
{
"use strict";
cloudChatHide.remove();
cloudChatHide.className ='fadeout';
}
我真正想做的是在幾秒鍾后自動淡化div，然后將其刪除。
我需要從窗口中刪除div的原因是它是一個重疊的div，我需要訪問“cloudChatHide”div下面的內容。
感謝任何幫助/指導，因為我不是最好的Javascript開發人員。
謝謝。
4 個解決方案
解決方案1
2 2017-02-17 11:27:33
您可以使用CSS過渡平滑淡出元素並偵聽transitionend事件以在轉換完成時刪除元素。
看到這個jsFiddle 。
轉換是使用此CSS定義的：
div {
opacity: 1;
transition: opacity 1s;
}
div.fade-out {
opacity: 0;
}
只要將漸弱類添加到div，它就會在1秒的時間內平滑地降低其不透明度。 這可以使用以下JavaScript完成，不需要jQuery：
function fadeOutAndRemove(element) {
element.classList.add('fade-out');
element.addEventListener('transitionend', function () {
element.parentNode.removeChild(element);
});
}
如果你想在一個固定的延遲后自動開始淡出過渡，你可以在超時后調用fadeOutAndRemove
window.setTimeout(fadeOutAndRemove.bind(this, elementToHide), 3000)
或者為過渡添加延遲
transition: opacity 1s 3s;
並使用淡出類來初始化元素
<div class="fade-out"></div>
解決方案2
0 2017-02-17 11:42:05
Alessandro Maglioccola的輝煌成績
<html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery.min.js"></script> </head> <body> <div class="fadeout">I'LL DISAPPEAR IN 3 SECONDS</div> </body> <script> function fadeOut() { $(".fadeout").fadeToggle(500, "swing",function(){ this.remove(); }); } var delay = 3000; //3 seconds setTimeout(fadeOut, delay); </script> </html>
解決方案3
0 2017-02-17 13:21:59
這是一種沒有Jquery的方法。 我使用setTimeout將不透明度設置為0等待300ms然后如果已經隱藏則執行相反操作。
hideMe = function(selector, self) { var elem = document.querySelector(selector); if (self.innerHTML == "Hide") { elem.classList.add("fade"); setTimeout(function() { elem.classList.add("hidden"); self.innerHTML = "Show"; }, 300) } else { elem.classList.remove("hidden"); setTimeout(function() { elem.classList.remove("fade"); self.innerHTML = "Hide"; }, 300) } }
body { margin: 0; } .header { height: 100px; width: 100%; background: steelblue; } #vanish { transition: all 300ms cubic-bezier(.25, .8, .25, 1); } .redsquare { width: 100%; height: 225px; background: tomato; opacity: 1; } .hidden { height: 0px; width: 0px; } .fade { opacity: 0; } button { width: 100%; height: 25px; border: 0px; outline: none; cursor: pointer; }
<div class="header"></div> <button onclick='hideMe("#vanish",this)'>Hide</button> <div id="vanish" class="redsquare"></div> <div class="header"></div>
解決方案4
-1 已采納 2017-02-17 10:56:46
如果您可以使用JQuery，它將非常簡單，請參閱以下內容：
<html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery.min.js"></script> </head> <body> <div class="fadeout">I'LL DISAPPEAR IN 3 SECONDS</div> </body> <script> function fadeOut() { $(".fadeout").fadeToggle(500, "swing",function(){ this.remove(); }); } var delay = 3000; //3 seconds setTimeout(fadeOut, delay); </script> </html>
當淡入淡出動作完成時，div將被刪除。 我希望它可以幫助你，再見。
刪除 JavaScript 中的按鍵延遲？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.