Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.12.2018, 16:47
Новичок на форуме
Отправить личное сообщение для dimpase Посмотреть профиль Найти все сообщения от dimpase
 
Регистрация: 03.12.2018
Сообщений: 4

Плавное перемещение
Здравствуйте.
Имеется блок 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dimpase,
сделайте минимальный макет
Ответить с цитированием
  #3 (permalink)  
Старый 03.12.2018, 17:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 03.12.2018 в 18:16.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать плавное перемещение картинки ArsenInvoker Элементы интерфейса 21 07.03.2015 13:25
Перемещение плавное объекта programmwriter jQuery 3 17.09.2014 11:54
Плавное перемещение картинок в галерее Адриан Общие вопросы Javascript 0 09.02.2012 20:43
Плавное перемещение выделения меню igsavenko jQuery 5 22.06.2011 15:16
Grid - roweditor плавное перемещение Jevgeny ExtJS 2 26.10.2010 14:43