延迟删除 DIV Javascript

Question

这是我的第一个问题，如果我不遵守正确的礼仪，请原谅我。

我有一个 javascript 函数，可以隐藏 div 淡入淡出。

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

但是此代码不会删除 DIV，即 RemoveCloudChat 函数。看起来像这样：-

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

我真正想要做的是在几秒钟后自动淡化 div 然后删除它。

我需要从 window 中删除 div 的原因是它覆盖了 div，我需要访问 'cloudChatHide' 下面的内容 div.

任何帮助/指导都将不胜感激，因为我不是最伟大的 Javascript 开发人员。

谢谢。

Answer 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>

淡入淡出动作完成后，div 将被移除。希望对你有帮助，再见。

Answer 2

您可以使用 CSS 过渡平滑地淡出元素并监听 transitionend 事件以在过渡完成时移除元素。

看到这个jsFiddle。

转换是这样定义的 CSS:

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

div.fade-out {
  opacity: 0;
}

只要将 fade-out class 添加到 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;

并使用 fade-out class

初始化元素

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

Answer 3

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>

Answer 4

这里有一种不用 Jquery 的方法。我使用 setTimeout 将不透明度设置为 0，等待 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>

延迟删除 DIV Javascript

Remove a DIV with a delay Javascript

html

javascript

fade

delay