Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Удаление элемента через секунду после появления (https://javascript.ru/forum/jquery/59503-udalenie-ehlementa-cherez-sekundu-posle-poyavleniya.html)

Anfisunka 13.11.2015 16:10
Удаление элемента через секунду после появления
 
$("body").append("<div class='poof' style='top: " + margintop + "px; left: " + marginleft + "px'></div>");

Вот так через рандомный промежуток времени, больше или меньше секунды, создаю блок с абсолютным позиционированием. Мне нужно, чтобы каждый такой блок ровно через секунду удалялся (либо скрывался, не важно). Как это осуществить?

Mess4me 13.11.2015 16:40
Anfisunka,
так?
<!DOCTYPE html>
<html>
<head lang="en">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <meta charset="UTF-8">
    <title>
    </title>
    <style>
        div {
            border: 1px solid black;
            height: 20px;
        }

    </style>
</head>
<body>
 
<script>

    var div = "<div class='poof' style='top: " + 10 + "px; left: " + 10 + "px'></div>";
            $("body").append(div);
            setTimeout(function () {
                $('.poof')[0].remove();
            }, 2000)



</script>
</body>
</html>

Anfisunka 13.11.2015 16:58
Так ведь появляются блоки этого класса в разное время, и их много. Возможен такой вариант, что предыдущий блок ещё не удалился, а новый уже появился, тогда новый блок исчезнет раньше?

pnpquest 13.11.2015 17:18
Цитата:
Сообщение от Anfisunka
Возможен такой вариант, что предыдущий блок ещё не удалился, а новый уже появился, тогда новый блок исчезнет раньше?
Ну так это же напрямую зависит от таймаута. Возможен, в принципе, если диапазон таймаута это позволит. А Вас это смущает? По Вашей задумке блоков всегда должно быть одинаковое количество?

Anfisunka 14.11.2015 00:25
Блоков отображаться может сколько угодно, а вот если удаляться они будут одновременно, будет плохо.

Anfisunka 14.11.2015 01:52
...Всё, я поняла. Спасибо за помощь
Долго же до меня доходило.

рони 14.11.2015 20:45
Anfisunka,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body,html{
     height: 100%;

  }
  body{
    position: relative;
  }

  .poof {
    background: #FFCC00;
    width: 50px;
    height: 50px;
    position: absolute;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $("body");
       s.click(function(event) {
         var div = $("<div/>",{css : {top: event.clientY - 30 + "px", left: event.clientX - 30 + "px"}, "class" : "poof"});
         div.appendTo(s).delay(1000).show(function() {
      div.remove()
})
      });
});

  </script>
</head>

<body>

Click on the body anywhere

</body>

</html>


Часовой пояс GMT +3, время: 03:22.