Плавное перемещение
Здравствуйте.
Имеется блок diм, внутри имеются вложенные div без id При добавлении нового блока в основной контейнер в конец не могу добиться чтобы все остальные контейнеры перемещались вверх плавно. Как можно реализовать данный метод, это повысит юзабилити данной функции. Если кол-во блоков больше n то удаляем старые блоки(первые)
var countDivLog = $('#consoleGetLog div').length;
if(countDivLog>25){
var jk=$('#consoleGetLog');
$('#consoleGetLog > div:first-child').remove();
}
<div> <div></div> <div></div> <div></div> <div></div> </div> |
dimpase,
сделайте минимальный макет |
dimpase,
:cray:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#consoleGetLog{
width: 200px;
height: 300px;
border: 1px solid #FF0000;
overflow: hidden;
}
#consoleGetLog div{
height: 50px;
border: 2px solid #0000CD;
border-radius: 8px;
margin: 2px 4px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var num = 4;
function add()
{ var jk=$('#consoleGetLog');
var divs = $('#consoleGetLog div');
var countDivLog = $('#consoleGetLog div').length;
var max = 25;
var height;
if(countDivLog >= max){
$('#consoleGetLog > div:first-child').remove();
height = jk[0].scrollHeight - jk[0].offsetHeight;
jk.scrollTop(height)
}
var div = $('<div>', {html : ++num}).appendTo(jk);
height = jk[0].scrollHeight - jk[0].offsetHeight;
$('p').html($('#consoleGetLog div').length);//для теста кол-во блоков всего
jk.delay(100).animate({scrollTop : height }, 300)
window.setTimeout(add, 1500)
}
add()
});
</script>
</head>
<body>
<p></p>
<div id="consoleGetLog">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 21:15. |