All geek questions in one place

Remove Javascript Delayed DIV

This is my first question, so forgive me if I do not apply the right etiquette.

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

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

However, this code does not remove the DIV, which is a RemoveCloudChat function. It looks like this: -

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

What I really want to do automatically disappears automatically after a few seconds, and then DELETES it.

The reason I need to REMOVE the div from the window is because its overlay div and I need to access the content under the cloudChatHide cloud.

Any help / instruction wouild is greatly appreciated since I am not the biggest Javascript developer.

Thank.

+4
source share
4

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>
Hide result

fade , div . , , .

-1

CSS .

jsFiddle.

CSS:

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

div.fade-out {
  opacity: 0;
}

fade-out div, 1 . JavaScript, jQuery:

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

fadeout , fadeOutAndRemove

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


transition: opacity 1s 3s;

fade-out

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

Brilliant result from 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>
Run codeHide result
0
source

Here is a way to do it without jQuery. I set the opacity to 0, waiting for 300 ms to use setTimeout, and then do the opposite if it is 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>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1670051/

More articles:


All Articles