html - Remove a DIV with a delay Javascript

this is my first question so forgive me if I don't apply the correct etiquette.

I have a javascript function that hides a div with a fade.

function fadeOut(cloudChatHide)
{
    "use strict";
    cloudChatHide.onclick = function()
        { 
            if(cloudChatHide.className)
                {
                cloudChatHide.className = '';
                } 
            else 
                {               
                cloudChatHide.className = 'fadeout';
                RemoveCloudChat();
                }
        };
}

However this code doesn't remove the DIV which is the RemoveCloudChat Function. Which looks like this:-

function RemoveCloudChat()
{
    "use strict";
    cloudChatHide.remove();
    cloudChatHide.className ='fadeout';
}

What I really want to do is fade the div automatically after a few seconds and then REMOVE it.

The reason I need to REMOVE the div from the window is that its an overlaid div and I need to access the content underneath the 'cloudChatHide' div.

Any help / instruction wouild be gratefully received as I am not the greatest Javascript developer.

Thanks.

this is my first question so forgive me if I don't apply the correct etiquette.

I have a javascript function that hides a div with a fade.

function fadeOut(cloudChatHide)
{
    "use strict";
    cloudChatHide.onclick = function()
        { 
            if(cloudChatHide.className)
                {
                cloudChatHide.className = '';
                } 
            else 
                {               
                cloudChatHide.className = 'fadeout';
                RemoveCloudChat();
                }
        };
}

However this code doesn't remove the DIV which is the RemoveCloudChat Function. Which looks like this:-

function RemoveCloudChat()
{
    "use strict";
    cloudChatHide.remove();
    cloudChatHide.className ='fadeout';
}

What I really want to do is fade the div automatically after a few seconds and then REMOVE it.

The reason I need to REMOVE the div from the window is that its an overlaid div and I need to access the content underneath the 'cloudChatHide' div.

Any help / instruction wouild be gratefully received as I am not the greatest Javascript developer.

Thanks.

Share Improve this question asked Feb 17, 2017 at 10:38 motjuice 431 silver badge5 bronze badges

Could you post your html? – Alessandro Commented Feb 17, 2017 at 10:40
Maybe stackoverflow./questions/951021/… can lead you into the right direction. – Reporter Commented Feb 17, 2017 at 10:41
HI thanks for that, TBH I don't really understand whats written there. – motjuice Commented Feb 17, 2017 at 11:08

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

You can use CSS transitions to smoothly fade out the element and listen for the transitionend event to remove the element when the transition has finished.

See this jsFiddle.

The transition is defined with this CSS:

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

div.fade-out {
  opacity: 0;
}

As soon as you add the fade-out class to a div it will smoothly reduce its opacity over a period of 1 second. This can be done with the following JavaScript, no jQuery required:

function fadeOutAndRemove(element) {
    element.classList.add('fade-out');
    element.addEventListener('transitionend', function () {
      element.parentNode.removeChild(element);
    });
}

If you want to start the fadeout transition automatically after a fixed delay you could call fadeOutAndRemove after a timeout

window.setTimeout(fadeOutAndRemove.bind(this, elementToHide), 3000)

or add a delay to the transition

transition: opacity 1s 3s;

and initalise the element with the fade-out class

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

If you could use JQuery, it will really simple, see following:

<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery./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>

When the fade action is pleted the div will be removed. I hope it helps you, bye.

Brilliant result from Alessandro Maglioccola

<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery./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>

Here's a way to do it without Jquery. I'm setting the opacity to 0 waiting 300ms using a setTimeout then do the reverse if it's already hidden.

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Remove a DIV with a delay Javascript - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)