Вход

Просмотр полной версии : Удаление элемента через секунду после появления

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