使用jQuery持续动画边框颜色

Question

我有一些代码可以使用jQuery连续动画3种颜色之间div的边框颜色。问题是，不是在红色，绿色和蓝色之间直接淡化，边界在每次颜色过渡之间瞬间消失。请查看此fiddle以了解我的意思。

我的jQuery代码如下。有没有人看到我出错的地方导致边框在动画之间消失，而不是像我想要的那样在颜色之间平滑过渡？任何帮助表示赞赏。

编辑：我正在寻找一个jQuery解决方案，而不是使用转换效果的CSS解决方案。

animateBorder();
  function animateBorder() {
     $("#myDiv").animate({
     borderColor: "red"
  }, {
    duration: 5000,
    complete: function () {
        $("#myDiv").animate({
            borderColor: "green"
        }, {
            duration: 5000,
            complete: function () {
                $("#myDiv").animate({
                    borderColor: "blue"
                }, {
                    duration: 5000,
                    complete: function () {
                        animateBorder();
                    }
                });
              }
          });
        }
    });
 }