拖延刪除DIV Javascript

這是我的第一個問題，所以請原諒我，如果我不適用正確的禮儀。拖延刪除DIV 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開發人員。

謝謝。

來源

2017-02-17 motjuice

你可以發佈你的HTML？ – Alessandro

也許http://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep?noredirect=1&lq=1可以引導你走向正確的方向。 – reporter

嗨，謝謝，TBH我真的不明白寫在那裏的是什麼。 – motjuice

-1

如果你可以使用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>

當褪色動作完成股利將被刪除。我希望它能幫助你，再見。

來源

2017-02-17 10:56:46 Alessandro

嗨，謝謝你的回答，但是我想DIV在DELAY後被刪除，但沒有被點擊。我原來的代碼處理淡入淡出，我想要的是1. DIV加載，2.在延遲5000說明DIV淡入淡出3.然後div被移除，並且這一切都必須發生，沒有點擊或任何其他交互由用戶。謝謝 – motjuice

你會在頁面加載後的一段延遲之後刪除div嗎？ – Alessandro

是的，頁面加載，div出現後延遲淡化，然後被刪除，這就是我需要的。謝謝 – motjuice

您可以使用CSS轉換平滑淡出元素，並監聽transitionend事件以在轉換完成時刪除元素。

看到這個jsFiddle。當你添加淡出類一個div就會順利降低其不透明度在1秒鐘一旦

div { 
    opacity: 1; 
    transition: opacity 1s; 
} 

div.fade-out { 
    opacity: 0; 
}

：

的過渡被定義與此CSS。這可以用下面的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;

和initalise與淡出類元素

<div class="fade-out"></div>

來源

2017-02-17 11:27:33 seabeast

我認爲這是可以接受的答案。很好解釋，並不需要jQuery。 – tfidelis

精彩結果從亞歷山德羅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>

來源

2017-02-17 11:42:05 motjuice

這裏有一個辦法做到這一點沒有jQuery的。我將不透明度設置爲0，使用setTimeout等待300毫秒，然後在已經隱藏的情況下進行相反操作。

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>

來源

2017-02-17 13:21:59

拖延刪除DIV Javascript

回答

相關問題