Как добавить визуальный эффект при ajax обновлении данных к конкретной строке?

Question

Допустим есть 5 строк:

<p><a href="https://site.ru" target="_blank">test 1</a> <test>47534</test></p>
<p><a href="https://site.ru" target="_blank">test 2</a> <test>4534</test></p>
<p><a href="https://site.ru" target="_blank">test 3</a> <test>45364</test></p>
<p><a href="https://site.ru" target="_blank">test 4</a> <test>4534</test></p>
<p><a href="https://site.ru" target="_blank">test 5</a> <test>7373</test></p>

После Ajax запроса, 3 строка в файле ajax.php занимает позицию под номером 1, как визуально это оформить на сайте (вспышка строки или выделение цветом на доли секунды или стрелка вверх или вниз...), чтобы было заметно. Необходимо что-то похожее на обновление на биржах.

При смене позиции с 3 на 1, в строке изменяется параметр <test - цифры>

Сам код:

<div id="app"></div>


<script type="text/javascript">
    function show()  
    {  
        $.ajax({  
            url: "ajax.php",  
            cache: false,  
            success: function(html){  
                $("#app").html(html);  
            }  
        });  
    }  
  
    $(document).ready(function(){  
        show();  
        setInterval('show()',1000);  
    });  
</script>

Спасибо!

Answer 1

Подключаете например это https://animate.style/ и в функции success добавляете класс с анимацией нужному блоку

<div class="box">
  <p><a href="https://site.ru" target="_blank">test 1</a></p>
  <p><a href="https://site.ru" target="_blank">test 2</a></p>
  <p><a href="https://site.ru" target="_blank">test 3</a></p>
  <p><a href="https://site.ru" target="_blank">test 4</a></p>
  <p><a href="https://site.ru" target="_blank">test 5</a></p>
</div>

function show()  
    {  
        $.ajax({  
            url: "ajax.php",  
            cache: false,  
            success: function(html){  
                $("#app").html(html);
                $('.box').first().addClass('animate__animated animate__bounce')
            }  
        });  
    }  
  
    $(document).ready(function(){  
        show();  
        setInterval('show()',1000);  
    });

БЛОГ НА HUSL

Как добавить визуальный эффект при ajax обновлении данных к конкретной строке?

Ответы (1 шт):