Good day, I want to automatically hide the div after 15 seconds after its appearance with the help of fadeOut (), but I can not catch the moment of the appearance of this div. Does anyone know an event or a way to do this? A div is generated and added to the block using innerHTML.

function notificate(head, text) { var icon = 'fa fa-times'; var iconcolor = '#fff'; newbox = '<div id="notification"><div class="icon"><i class="fa fa-exclamation-triangle" style="color:' + iconcolor + ';"></i></div><b>' + head + '</b><p>' + text + '</p></div>'; notifications.innerHTML = notifications.innerHTML + newbox; } 
 body { background-color: #eee; } #notifications { position: fixed; left: 20px; bottom: 0px; width: 400px; } #notification { width: 100%; height: 100px; background: #303030; box-shadow: 0px 0px 10px #222; margin: 0 0 20px 0; transition: all ease-in-out 0.05s; position: relative; left: 0; opacity: 1; transform: scale(1); cursor: pointer; animation-delay: 5s; } #notification:active { transform: scale(0.97); } #notification .icon { width: 100px; height: 100px; background: #282828; float: left; } #notification .icon i { color: #e74c3c; font-size: 50px; margin: 25px; width: 50px; text-align: center; } #notification p { float: left; margin: 15px; display: block; color: #ccc; width: 270px; margin-top: 5px; } #notification pb { margin: 0; } #notification b { float: left; margin: 10px 15px; display: block; color: #ccc; margin-bottom: 0; font-weight: 900; } 
 <div onclick="notificate('Заголовок', 'Содержание уведомления');" style="padding:10px;border-radius:5px;background:#fff;display:inline-block;cursor:pointer;">Вывести уведомление</div> <div id="notifications"> </div>

  • Does the block have an id? - Vasily Barbashev
  • one
    how do you add a div? bring your code - Grundy
  • Greetings. You can also catch the moment of adding a div, but for this you need to understand where it is inserted. - Maxim Bogdanov
  • @MaximBogdanov I posted on jsfiddle jsfiddle.net/monoffo/grpbh35y/4 - Dibster
  • @Grundy I posted on jsfiddle jsfiddle.net/monoffo/grpbh35y/4 - Dibster

3 answers 3

 function notificate(head, text) { var icon = 'fa fa-times'; var iconcolor = '#fff'; newbox = '<div id="notification"><div class="icon"><i class="fa fa-exclamation-triangle" style="color:' + iconcolor + ';"></i></div><b>' + head + '</b><p>' + text + '</p></div>'; notifications.innerHTML = notifications.innerHTML + newbox; setTimeout(function () { $('div#notification').fadeOut(); }, 15000); }

    Hey. The block most likely should have an identifier. And if so, your task for one block is solved like this:

    There is a div :

     <div id="fadeOutBlock">Some text to fadeOut</div>

    And the code:

     setTimeout(function () { $('#fadeOutBlock').fadeOut(); }, 5000)

    After 5 seconds (5000 ms), the block with the given identifier disappears. You can setTimeout method after initialization (block insertion) into the DOM.

    • but I can’t catch the moment when this div appears. - I think the question is a bit about the other - Grundy
    • then you need to understand how it inserts an element into the page, because it must control this moment. - Vasily Barbashev

    http://api.jquery.com/has-selector/

    $( ".yourElement:has(div)" ) - you can make a timer, which in the loop will check for the presence of the element.

    https://stackoverflow.com/questions/4780822/how-can-i-detect-when-a-new-element-has-been-added-to-the-document-in-jquery

     $(document).bind('DOMNodeInserted', function(e) { console.log(e.target, ' элемент был добавлен'); }); // думаю, вместо document можно Ваш элемент поставить, куда div вставляется

    using http://plugins.jquery.com/livequery/

     $('.yourElement').livequery(function() { console.log(e.target, ' элемент был добавлен'); });