Javascript 如何在单击按钮时转换动画？

我对文本有一个动画效果：“蓝盒子”。它不断变换为不同的颜色。我希望在单击submit按钮时将此文本转换为蓝色。（注意：提交按钮将带您进入下一页）然而，一旦我在下面添加此JS和css，bluebox color动画将完全中断

$（'.submitbutton'）。单击（函数（e）{
$submit=$（这个）；
e、 预防默认值（）；
$（'form'）。设置动画({
不透明度：“0”
}, {
持续时间：“慢”，
$（“文本颜色文本流”）.addclass（'BBblue'），
完成：函数（）{
$submit.parents（'form'）.submit（）；
}
});
});
@关键帧蓝框蓝{
从{
颜色：''；
}
到{
颜色：蓝色
}
}
B.蓝色{
动画：BlueboxBlueEase2s；
}

蓝盒子
蓝盒子
按钮不必输入submit，任何按钮都可以触发表单提交。
另外，
addclass
应该是
addclass


$（'.submitbutton'）。单击（函数（e）{
e、 预防默认值（）；
$（“.textdisplay”）.addClass（'BBblue'）；
setTimeout（函数（）{$（'#form1'）.submit（）；}，2000）；
});
@关键帧蓝框蓝{
从{
颜色：''；
}
到{
颜色：蓝色
}
}
B.蓝色{
动画：蓝盒蓝2无限；
}

这是一个测试
提交
addclass
必须是
addclass
，JS区分大小写。为了将来的参考，如果你曾经有过JS代码没有按照预期工作，请检查dev tools中的控制台是否有错误；通常在浏览器中的F12键下。在这种情况下，将出现“addclass不是函数”错误。此问题是由无法再复制的问题或简单的印刷错误引起的。虽然类似的问题可能会在这里讨论，但这个问题的解决方式不太可能对未来的读者有所帮助。请添加相关HTML-这是无效的jQuery选择器
$（“文本颜色文本流”）
谢谢您的建议，Rory。mplungjan，我已经在代码片段中添加了html。对不起，我花了一段时间才意识到你做了一个完整的修改，因为我不知道这是这个网站上的一个功能lol。（谢谢你的时间顺便说一句！！！）