fadeToggle动画在淡入时没有按预期运行

Question

我在我的流星项目中使用fadeToggle在点击时淡入淡出一些按钮。它似乎在逐渐淡出时工作正常，但在动画渐渐消失的同时，闪烁着＃34;看起来动画完成了两次。我已经尝试清除动画队，因此似乎不是问题。

gif of what goes wrong

这是我使用的jquery：

$("#editBtn").click(function () {       
    $('.deletebtn').fadeToggle(400, false);
    $('.addbtn').fadeToggle(400, false);
    if ($("#editBtn").text() == "Edit") {
        $("#editBtn").text("Finish");
    } else {
        $("#editBtn").text("Edit");
    }
});

按钮中的html触发动作：

<li><a id="editBtn" class="waves-effect waves-light btn resizebtn amber darken-2" href="#">Edit</a></li>

按钮中的html淡入/淡出：

<a class="btn-floating waves-effect waves-light amber darken-2 deletebtn right"><i class="material-icons deleteico">close</i></a>
<a class="btn-floating btn-large waves-effect waves-light amber darken-2 addbtn"><i class="material-icons">add</i></a>

我正在使用chrome btw。

提前致谢！