Форум

Anfisunka · #1 (**permalink**) 13.11.2015, 16:10

$("body").append("<div class='poof' style='top: " + margintop + "px; left: " + marginleft + "px'></div>");

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

Mess4me · #2 (**permalink**) 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 · #3 (**permalink**) 13.11.2015, 16:58

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

pnpquest · #4 (**permalink**) 13.11.2015, 17:18

Сообщение от Anfisunka

Возможен такой вариант, что предыдущий блок ещё не удалился, а новый уже появился, тогда новый блок исчезнет раньше?

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

Anfisunka · #5 (**permalink**) 14.11.2015, 00:25

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

Anfisunka · #6 (**permalink**) 14.11.2015, 01:52

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

рони · #7 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript