Как сделать динамическое увеличение top по клику?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/qBBMmzY

Сейчас все нотисы на одном уровне, как сделать, чтобы top был динамическим ?

А когда нотис удаляется, то у него top также был динамическим ?

Comments

[Алексей Юдов]

А теперь можете выразиться яснее? А то вам сейчас такой динамический top сделают, в другую вкладку улетит...

[Genri_Rus]

TCloud, вот как тут нужно: vintagetechnics.ru

Там при добавлении товара и последующих кликах top у сообщений динамический

[Genri_Rus]

TCloud, тут наверно нужен цикл, в котором у каждого элемента - top будет увеличиваться ?

[Алексей Юдов]

Genri_Rus, я полагаю что раз вам нужен top, то вы хотите прилипание сделать, правильно? А при добавлении новых "нотисов" они формировали список, как на ссылке выше.

[Genri_Rus]

TCloud, да

У первого нотиса top: 0

А у второго top допустим в 2 раза больше, у 3 еще больше и т.д.

Чтобы они были друг под другом

Answer 1

[Алексей Юдов]

Можно так попробовать, но в целом у меня глаза болят от такой реализации

Comments

[Genri_Rus]

Мне нужно сделать именно через js

[Алексей Юдов]

Genri_Rus, что именно? В коде и так все элементарные действия через js-велосипед делаются.

[Алексей Юдов]

Genri_Rus,

[Алексей Юдов]

Genri_Rus,
Вот теперь котсыль динамичный

let noticeHeight = ( $(".notice__info").length == 0 ? 0 : $(".notice__info").height() )
  let topProperty = items.length * noticeHeight
  
  $('.notice').append(out).css('top', topProperty);

[Genri_Rus]

TCloud, спасибо

А при удалении как сделать ?

Допустим человек удалил и нотис стал выше ?

[Алексей Юдов]

Genri_Rus, так как тут все практически вручную то надо «перерендерить» массив нотисов, чтобы top-ы переписать...вы сами себе геморрой выдумали подобной реализацией...

[Genri_Rus]

TCloud, на том сайте они реализовали как-то так:

var w = $(el).outerHeight() - 5
	$(el).animate({
	top: w + "px",
	left: 0
, 200)

Они берут высоту элемента и с помощью анимации отнимают top
Но я пытался так сделать, но там все запутано из-за Underscore.js.

[Genri_Rus]

TCloud, а вот я хотел спросить, может знаете почему у меня при каждом клике нотисы все дергаются ?

Как-будто this не срабатывает

for (var t = 0; t < 6; t++) {
      $('.notice__info').animate({
        "margin-left": t % 2 == 0 ? 5 : -5
      }, {
        duration: 70,
        queue: !0
      });
    }

[Алексей Юдов]

Genri_Rus, это из за "динамических" расчетов margin-left

for (var t = 0; t < 6; t++) {
      $('.notice__info').animate({
        "margin-left": t % 2 == 0 ? 5 : -5
      }, {
        duration: 70,
        queue: !0
      });
    }

[Genri_Rus]

TCloud, а как тут можно проще реализовать ?

[Алексей Юдов]

Genri_Rus, animate.css библиотеку подключить, в случае если нужна анимация, если нет, то убрать этот кусок кода

[Genri_Rus]

TCloud, анимация нужна в точь-то как на том сайте, ради этого animate.css подключать и если там немножко другая анимация ?

У них там реализовано точно также, но почему-то this не пашет, переменная t, ее реально объявили в цикле

[Алексей Юдов]

Genri_Rus, не видел там никакой анимации

[Genri_Rus]

TCloud, если долго кликать то есть: vintagetechnics.ru

[Алексей Юдов]

Genri_Rus, можно такую анимацию выдернуть из animte.css или написать самому, делов на 5 мин

[Genri_Rus]

TCloud, а на js в цикле нельзя ?

[Алексей Юдов]

Genri_Rus, мягко говоря, не стоит

[Genri_Rus]

TCloud, а почему тогда крупные компании типа: конструктора nethouse делают именно через js ?

Это просто такой тон или более профессионально ?

[Алексей Юдов]

Genri_Rus, вы можете спросить об этом у них.

[Genri_Rus]

TCloud, а ваше мнение какое на этот счет ?

[Алексей Юдов]

Genri_Rus, к подобным манипуляциям через js, я про анимирование UI компонентов, я не прибегаю. Для этого есть css

[Genri_Rus]

TCloud, а я как-то сделал плавное перемещение при клике: https://test.vintagetechnics.ru/
Не могу только понять, как при удалении поднимать вверх элемент

[Алексей Юдов]

Genri_Rus, у вас изначально запутанная реализация, я бы на вашем месте удалил бы всё и переписал более чище, иначе потом понять ваш код сможет только "шаман" ;)

[Genri_Rus]

TCloud, вот пример анимации на js: https://stackoverflow.com/questions/12083004/how-d...

Мой вариант такой же, в чем проблема ?

for (var x = 1; x <= 3; x++) {
for (var t = 0; t < 6; t++) {

[Алексей Юдов]

Genri_Rus, слишком простая анимация для js.

Что лучше использовать для анимаций css или js? И почему?

[Genri_Rus]

TCloud, а как сделать, чтобы третий не наезжал на второй ?

https://codepen.io/Genri_Rus/pen/qBBMmzY

[Genri_Rus]

TCloud, items.length (в консоли undefined)

Если я добавлю третий элемент, то у меня все друг под другом

Ваш вариант только для 2 элементов

[Алексей Юдов]

Genri_Rus, мой вариант изначально предполагается для items = [], а не для items = {}

[Genri_Rus]

TCloud, а если мне нужен массив как тут ?

https://codepen.io/Genri_Rus/pen/qBBMmzY

[Алексей Юдов]

Genri_Rus, тут объект

[Genri_Rus]

TCloud, извиняюсь, а тут вообще как можно сделать?
https://codepen.io/Genri_Rus/pen/qBBMmzY

[Алексей Юдов]

[Genri_Rus]

TCloud, не меняя css и вы меня немного запутали )

У вас также объект:
const items = {};

[Алексей Юдов]

Genri_Rus, решение уже давно лежит перед вами, хотите делать через js, сидите и изучайте его...помочь больше ничем не могу.

[Genri_Rus]

TCloud, items.length (в консоли undefined)

Вот ваш вариант: https://jsfiddle.net/rubd71ah/1/?utm_source=websit...

[Genri_Rus]

TCloud, ну хотя бы подскажите, что нужно сюда добавить ?

var w = $(el).outerHeight() + 5

[Genri_Rus]

TCloud, я сделал: https://codepen.io/Genri_Rus/pen/qBBMmzY

Ошибка была в этом: $(el).outerHeight() + 5

[Genri_Rus]

TCloud, пофиксил анимацию: https://codepen.io/Genri_Rus/pen/qBBMmzY

Теперь поочередно работает, осталось удаление сделать при заканчивания таймера

[Алексей Юдов]

Genri_Rus, лучше оставь этого "франкинштейна" при себе и никому его не показывай, а лучше "убей"

[Genri_Rus]

TCloud, )

Зато на js все

[Genri_Rus]

TCloud, теперь и удаление: https://codepen.io/Genri_Rus/pen/NWWLXyM