Форум

dimpase · #1 (**permalink**) 03.12.2018, 16:47

Здравствуйте.
Имеется блок 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>

рони · #2 (**permalink**) 03.12.2018, 16:59

dimpase,
сделайте минимальный макет

рони · #3 (**permalink**) 03.12.2018, 17:37

dimpase,

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

Форум

Справочник

Discord чат

Курсы javascript