Удалите DIV с задержкой Javascript

это мой первый вопрос, так что простите меня, если я не применяю правильный этикет.Удалите DIV с задержкой Javascript

У меня есть функция 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 автоматически через несколько секунд, а затем удалить его.

Причина, по которой мне нужно УДАЛИТЬ div из окна, заключается в том, что его оверлейный div и мне нужно получить доступ к содержимому под облаком «cloudChatHide».

Любая помощь/инструкция wouild получаются с благодарностью, так как я не являюсь самым большим разработчиком Javascript.

Спасибо.

источник

2017-02-17 motjuice

Не могли бы вы опубликовать HTML? – Alessandro

Возможно, http://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep?noredirect11&lq=1 может привести вас в правильном направлении. – reporter

HI спасибо за это, TBH Я действительно не понимаю, что там написано. – motjuice

-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 будут удалены. Надеюсь, это поможет вам, пока.

источник

2017-02-17 10:56:46 Alessandro

HI благодарит за ваш ответ, однако я хочу, чтобы DIV был удален после DELAY, но без его нажатия. Мой исходный код обрабатывает затухание в том виде, в каком он стоит, что я хочу 1. Загружается DIV, 2. После задержки 5000 DIV исчезает 3. тогда div удаляется, и это должно произойти без щелчка или любого другого взаимодействия пользователем. Спасибо – motjuice

Вы удалили бы div после задержки с момента загрузки страницы? – Alessandro

Да, страница загружается, div появляется тогда после того, как задержка исчезает, а затем удаляется, вот что мне нужно. Спасибо – motjuice

Вы можете использовать переходы CSS для плавного исчезновения элемента и прослушивания события перехода, чтобы удалить элемент при завершении перехода.

См. Это 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;

и initalise элемента с классом исчезать из

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

источник

2017-02-17 11:27:33 seabeast

Я думаю, что это приемлемый ответ. Хорошо объяснили и не нужно jquery. – tfidelis

Brilliant результат от Алессандро 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>

источник

2017-02-17 11:42:05 motjuice

Вот способ сделать это без Jquery. Я устанавливаю непрозрачность 0, ожидая 300 мс, используя setTimeout, затем делаю обратный, если он уже скрыт.

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>

источник

2017-02-17 13:21:59

Удалите DIV с задержкой Javascript

ответ

Смежные вопросы