javascript - 涟漪 Js 不会随着容器宽度的变化而变化

Question

我目前在我的网站中使用 Ripples js 库作为容器，尽管这个容器会根据点击事件上的 Jquery 更改宽度。出于某种原因，涟漪效应仍然保持 100% 宽度，而不管 Jquery 添加如何，这不允许我的 Jquery 运行，我该如何解决这个问题？

我网站的链接是：solace.earth 密码是：solace

下面是我用于此特定部分的代码片段。

 $('.ripple').ripples({
  resolution: 512,
  dropRadius: 30,
  perturbance: 0.04,
});  
  
  setInterval(function() {
        var $el = $('.ripple');
        var x = Math.random() * $el.outerWidth();
        var y = Math.random() * $el.outerHeight();
        var dropRadius = 30;
        var strength = 0.07 + Math.random() * 0.07;

        $el.ripples('drop', x, y, dropRadius, strength);
    }, 400);

$(document).ready(function() {
$(".nav-link-one").click(function(){
  $("#logo-img-container").animate({
    width: "60%",
  }, 1500 );
  $("#nav-copy-container").show("slow");
  $("#nav-one-list").show("slow");
  $("#nav-two-list").hide();
  $("#nav-three-list").hide();
  $("#nav-four-list").hide();
  $("#nav-five-list").hide();
  $("#nav-six-list").hide();
  $("#nav-seven-list").hide();
  $("#nav-eight-list").hide();
  $("#nav-nine-list").hide();
  $("#nav-ten-list").hide();
  $("#nav-eleven-list").hide();
});
    });

#middle-container {
  display: flex;
  border: 2px solid black;
  height: 80%;
  width: 90%;
  background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
  -webkit-transition: 1s;
  transition: 1s;
  align-items: center;
  overflow: auto;
}

#logo-img-container {
  height: 100%;
  width: 100%;
  -webkit-transition: 1s;
  transition: 1s;
}

#logo-img {
  height: 100%;
  width: 100%;
  background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603eec4c1f090e06f6ee6884/1614736460512/Solace_Logo-01.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 70%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>

<div id="middle-container">
        <div id="logo-img-container" class="ripple">
            <div id="logo-img"></div>
        </div>
</div>

任何帮助将不胜感激！太感谢了！

标签： javascriptjqueryonclickwidthripplejs