jQuery切换在动画之后起作用，但在动画之前不起作用

Question

有堆栈溢出社区。我确定只是缺少一些简单的东西，但对于我的一生，我无法弄清它到底是什么。

我有一个简单的动画，只是转置了一些div。动画可以运行，并且一切正常，但是我得到一些奇怪的行为，我不确定为什么会这样。

在我的jQuery中，有一个方法show_dots（整数毫秒）。该函数唯一要做的就是在要设置动画的4个元素上调用$ .toggle（）。我希望该功能表现为这样。页面已加载，这4个元素不可见。它们变得可见，然后动画运行。

当我在动画之前包含对show_dots的方法调用时，点不会出现并且动画会运行（我打开了浏览器的开发工具，并且看到了值的变化）。只是为了它的地狱，我投入了一个方法调用来在动画之后显示点。

在那种情况下，行为是...页面加载（点可见），动画运行，然后在方法调用后点消失了。我不确定为什么会这样。

我也曾尝试对这种能力进行动画处理，但无济于事。我不确定为什么它不起作用，但是我不确定从哪里开始。我确定这只是我不知道的一些固有功能，但是到目前为止，我不确定它是什么

代码如下：

let tl = $("#square-animation-div-tl");
let tr = $("#square-animation-div-tr");
let bl = $("#square-animation-div-bl");
let br = $("#square-animation-div-br");

$(window).on('load', function() {
  animation_loop(1300, tl, tr, bl, br);
  $("#journey-link").on("click", pause_animation);
});

function show_dots(dur) {
  tl.toggle(250);
  tr.toggle(250);
  bl.toggle(250);
  br.toggle(250);
};

function animation_loop(dur, tl, tr, bl, br) {
  //toggle_dots(250) //this line does not make the dots toggle in or out
  tl.animate({
      left: ($("#journey-link").width() - 18),
      borderRadius: "50%",
      backgroundColor: "#ffffff"
    }, dur)
    .animate({
      top: ($("#journey-link").height() - 18),
      borderRadius: "0%",
      backgroundColor: "#0000ff"
    }, dur)
    .animate({
      left: -12,
      borderRadius: "50%",
      backgroundColor: "#ffffff"
    }, dur)
    .animate({
      top: -12,
      borderRadius: "0%",
      backgroundColor: "#0000ff"
    }, dur);

  tr.animate({
      top: ($("#journey-link").height() - 18),
      borderRadius: "50%"
    }, dur)
    .animate({
      right: ($("#journey-link").width() - 18),
      borderRadius: "0%"
    }, dur)
    .animate({
      top: -12,
      borderRadius: "50%"
    }, dur)
    .animate({
      right: -12,
      borderRadius: "0%"
    }, dur);

  bl.animate({
      bottom: ($("#journey-link").height() - 18),
      borderRadius: "50%"
    }, dur)
    .animate({
      left: ($("#journey-link").width() - 18),
      borderRadius: "0%"
    }, dur)
    .animate({
      bottom: -12,
      borderRadius: "50%"
    }, dur)
    .animate({
      left: -12,
      borderRadius: "0%"
    }, dur);

  br.animate({
      right: ($("#journey-link").width() - 18),
      borderRadius: "50%",
      backgroundColor: "#ffffff"
    }, dur)
    .animate({
      bottom: ($("#journey-link").height() - 18),
      borderRadius: "0%",
      backgroundColor: "#0000ff"
    }, dur)
    .animate({
      right: -12,
      borderRadius: "50%",
      backgroundColor: "#ffffff"
    }, dur)
    .animate({
      bottom: -12,
      borderRadius: "0%",
      backgroundColor: "#0000ff"
    }, dur);
  toggle_dots(250);
  //animation_loop(dur,tl,tr,bl,br);
};

.square-animation-container {
  width: 100%;
  height: 100%;
  z-index: 3;
}

.square-animation-div {
  height: 24px;
  max-height: 24px;
  min-height: 24px;
  width: 24px;
  max-width: 24px;
  min-width: 24px;
  z-index: 2;
  position: absolute;
}

#square-animation-div-tl {
  top: -12px;
  left: -12px;
  background-color: blue;
}

#square-animation-div-tr {
  top: -12px;
  right: -12px;
  background-color: white;
}

#square-animation-div-bl {
  bottom: -12px;
  left: -12px;
  background-color: white;
}

#square-animation-div-br {
  bottom: -12px;
  right: -12px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square-animation-container">
  <div id="square-animation-div-tl" class="square-animation-div">

  </div>
  <div id="square-animation-div-tr" class="square-animation-div">

  </div>
  <div id="square-animation-div-bl" class="square-animation-div ">

  </div>
  <div id="square-animation-div-br" class="square-animation-div ">

  </div>
</div>