主页 / 问题 / 1144805
Accepted
Иван
Asked:2020-06-23 22:33:18 +0000 UTC2020-06-23 22:33:18 +0000 UTC

ajax将数据更新到特定行时如何添加视觉效果？

  • 772

假设有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 请求之后，ajax.php 文件中的第 3 行占据第 1 位，如何在网站上直观地排列它（字符串闪烁或高亮一秒钟或向上或向下箭头......）是显而易见的。需要类似于交易所更新的东西。

将位置从 3 更改为 1 时，参数 <test - digits> 在该行中更改

代码本身：

<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>

谢谢！

css

1 个回答

  1. Best Answer

    例如，连接这个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);  
    });
    • 1

相关问题