Search code examples
javascripthtmldelayfade

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.

Solution

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

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

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