Максим

не знаю как в jq, но в js это делается так

Родительскому элементу задай

display: flex; 
align-items: center;
justify-content: center;

Пример:

https://jsfiddle.net/23234234/5o41zw6e/

Очень легко флексами центрировать контент. У родительского блока указываешь:

display:flex;
justify-content:center;

jsfiddle.net/z40rc89s

Прописываем анимацию transition
При добавлении элемента вешаем на него класс hidden или типа того.
После добавления - снимаем этот класс. Так, чтобы запустилась анимация.

<div class="1">

Числа в качестве имён классов использовать не надо.

Убрать transition, добавить анимацию: animation: show 10s;.

Анимироваться будет прозрачность:

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Можно так
Кривую в viewBox нужного размера можно сгенерировать любым онлайн генератором, например, тут.

<div class=wrapper>
  <div>Text1</div>
  <div>Text2</div>
</div>

.wrapper {
  display: flex;
  justify-content: space-between;
}

const hrefs = Array.from(
  document.querySelectorAll('a'),
  n => n.getAttribute('href')
);

или

const hrefs = [].map.call(
  document.getElementsByTagName('a'),
  n => n.attributes.href.value
);

body {
  overflow: hidden;
}

В новых версиях есть функция перспективы: сначала обозначаете края слоя, а потом наклоняете их как вам заблагорассудится. Функция находится в меню Edit и называется Perspective Warp

pointer-events: none;

Так? https://jsfiddle.net/moq9m5fc/5/

$('ul').click(function(e) {
  e.stopPropagation();
  const $li = $(e.target).closest('li');
  if ($li.length) {
    $li.children('ul').toggle();
    $li.siblings().children('ul').hide();
  }
}).find('ul').hide();

https://jsfiddle.net/297m5euz/

getElementsByClassName() возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствуюих всем из указанных имен классов.

https://developer.mozilla.org/ru/docs/Web/API/Docu...

То есть там не один элемент возращается, а некий список. Вам придется открыть учебник и прочитать что такое "массив". И как обращаться к элементам массива.

Ну или научиться в делегирование, но это еще сложнее.

Код написанный табами может отображаться по-разному в зависимости от настроек редактора. А пробелы остаются пробелами и с ними такой проблемы нет. Пробелы это стандарт в большинстве больших компаний и в open source сообществе.
Еще программисты использующие пробелы в среднем больше зарабатывают. Но это от того, что в хороших компаниях высокие стандарты к качеству кода.
Современные IDE(вроде Webstorm) по-умолчанию заменяют табы на пробелы.

Вместо body анимируйте .wrapper:

$('.vertical').on('click', 'a', function(e) {
  e.preventDefault();

  const id = $(this).attr('href');
  const $wrapper = $('.wrapper');
  const offset = $(id).offset().top;
  const scrollTop = offset + $wrapper.scrollTop();
  $wrapper.animate({ scrollTop }, 1500);
});

https://developer.mozilla.org/en-US/docs/Web/SVG/E...

width: The width the image renders at. Unlike HTML's , this attribute is required.
height: The height the image renders at. Unlike HTML's , this attribute is required.