Как обновить анимацию у элемента?

Question

[Genri_Rus]

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

Нужно при клике обновлять анимацию, пробовал и settimeout использовать, все равно не получается

Comments

[Андрей]

Что значит обновлять? Начинать заново? Прекращать?

[Genri_Rus]

Андрей, при клике начинать заново

Answer 1

[Андрей]

Если минимально изменять ваш код, то вам нужно при повторном нажатии на кнопку и до выхода из .notice each перезапускать таймер. Сделать это можно с помощью метода stop(), очистки ширины полоски и нового запуска анимации. Вот пример. Обратите внимание на строку 20-21 скрипта.
Но вообще, я бы вам посоветовал создание полоски загрузки вынести в отдельную функцию, и вызывать её для создания и перезапуска анимации.
А еще, я полагаю, вы пытаетесь сделать что-то вроде этого (нажмите синюю кнопку show toastr). Можете поставить там галочку Progress Bar чтобы увидеть полоску загрузки.

Comments

[Genri_Rus]

Спасибо за разъяснения !

Но есть проблема, при клике мне нужно обновлять таймер только у одного элемента на которого кликнул (по типу this)

В вашем примере при клике на любую кнопку - все таймеры обновляются

И еще если долго кликать, то почему-то появляются новые элементы:

[Genri_Rus]

Когда таймер наполовину, если кликнуть, то добавится новый элемент

[Андрей]

Genri_Rus, https://codepen.io/Byte916/pen/KKKeYOw

[Genri_Rus]

Андрей, спасибо большое

Я еще кстати заметил, что если кликнуть по 2 кнопкам и больше ничего не нажимать и элементы сами удаляются по истечении таймера, то далее я кликаю, а элементы не добавляются

С чем это может быть связано ?

[Андрей]

Genri_Rus, с тем, что не удаляется items[name]
Я поправил, посмотрите

[Genri_Rus]

Андрей, Спасибо большое, но проблема вот в чем:

У меня данные приходят с сервера с помощью ajax:

<div class="-notification -f-medium error" style="opacity: 1; top: 0px;">
        <div class="-notification-close site-icons-close"></div>
        <div class="-icon-font- -f-large -notification-icon inline-block"></div>
        <div class="inline-block -notification-text">Товара "<?php echo $product_data->get_name(); ?>" нет в наличии в количестве 2 шт.</div>
        <div class="-notification-timer"></div>
      </div>

Вот как у них: vintagetechnics.ru
При добавлении товара и повторных кликах у них там нету ни единого идентификатора при выводе нотиса

Т.е. я использую AJAX так:

var Item = function(data) {
     this.data = data;
}
  var items = {};

$('button').on('click', function() {
$.ajax({
  type: 'POST',
  url: m_notice_click.ajax_url,
  data: dataMnot,
  dataType: 'json',
  success: function(data) {
    $('body').append('<div class="-notification-box"></div>');
        
    $('.-notification-box').each(function(index, value) {
      if (index > 0) {
        $(this).remove();
        if (items[data]) return;
              
        var item = new Item(data);
        items[data] = item;	
        $('.-notification-box').append(data);
      }
            
        var notTime = $('.-notification');
            
        if ($('.-notification-timer').width()) {
          $('.-notification-timer').stop(true, true).animate({width: 0}, {duration: 5000, complete: function() { $('.-notification-timer').css("width", "100%"); $(this).parent().remove(); delete items[data]; }});
            }
          });
      }
    });
});

[Genri_Rus]

Андрей, без идентификаторов у таймеров в данном случае никак не обойтись ?

[Genri_Rus]

Андрей, снова проблема:


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

[Андрей]

Genri_Rus, добавьте к обьекту Items поле в котором вы будете хранить таймер, и через это поле получайте доступ к нему. Тогда идентификатор не будет нужен

[Genri_Rus]

Андрей,

var Item = function(time, data) {
     this.time = time;
     this.data = data;
}

Так const item = new Item(5000, data); ?

[Андрей]

Genri_Rus, да, примерно так

[Genri_Rus]

Андрей, а далее правильно ?

if (items[time]) {
         runTimer(time, name);
         return;
       }

И мне нужно что-то типа такого:

var out = '<div class="notice__info"><div class="notice__info-name">'+ item.name +'<div class="notice__timer"></div></div><div class="notice__delete">X</div></div>';

[Genri_Rus]

Андрей, вот: https://codepen.io/Genri_Rus/pen/JjjBGXY

Так можно, но я не могу понять time нужно проверить ?

[Андрей]

Genri_Rus, обновил, исправил
Заодно исправил удаление элемента. У вас при удалении не останавливался таймер, это приводило к тому, что после удаления при создании могли появляться дубликаты.

[Genri_Rus]

Андрей, круто !

Спасибо, спасибо вам огромное, не первый раз выручаете !

[Genri_Rus]

Андрей, в данном случае
this.name = name;

Я могу вместо name, id карточки товара сохранять ?

Вот мой сайт: https://test.vintagetechnics.ru/

У меня у каждого товара есть свой id data-product_id="370"

Т.е. типа так:

var Item = function(id, data) {
     this.id = id;
     this.data = data;
}
const item = new Item(id, data);

Просто с сервера мне приходит вся вёрстка в data через ajax

[Андрей]

Genri_Rus, да можно