Question

这是我的第一个问题，如果我不采用正确的礼节，请原谅我。

我有一个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开发人员。

感谢。

Answer 1

您可以使用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>

Answer 2

Alessandro Maglioccola的辉煌成绩

＆＃13;

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

＆＃13;

Answer 3

这是一种没有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>

Answer 4

如果您可以使用JQuery，那将非常简单，请参阅以下内容：

Traversable

当淡入淡出动作完成后，div将被删除。我希望它可以帮助你，再见。

使用延迟Javascript删除DIV

4 个答案: