css - div粒子js的错误动画位置

Question

我在我的网页上使用类似这样的引导卡。

<div class="col-sm-4 m-auto">
      <a href="#" class="nostyle">
        <div class="card mb-3 ml-3 mr-1 pl-3" style="max-width: 540px;  border:none; box-shadow: 2px 2px 10px 0.0001px grey;">
                <div class="row no-gutters">
                  <div class="col-md-4">
                    <img src="'.$row['image'].'" height="100%" class="card-img" alt="...">
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title">'.$row['username'].'</h5>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

                    </div>
                  </div>
                </div>
                </div>
                </a>
              </div>

和 ajax 代码来获取这些 php 值：

$(document).ready(function(){
    $('#search_txt').keyup(function(){
        var txt = $(this).val();
        if (txt != '') {
            $.ajax({
                url: "fetch.php",
                method: "post",
                data: {search:txt},
                dataType: "text",
                success: function(data)
                {
                    $('#result').html(data)
                    var particles = new Particles('.card');
          $('.card').click(function(){
            particles.disintegrate();
          })
                }
            })
        } else {

        }
    })
});

一切正常，而不是动画。当我单击引导卡时，动画发生在卡片下方，卡片就留在原地。