Javascript Jquery检查事件和css动画

我制作了一个css动画，并使用jquery触发了复选框事件。但有时它不起作用。我不明白我做错了什么。有人知道我做错了什么吗

期望 -如果选中或取消选中输入（任何检查事件），则始终设置动画文本

得到 -有时有效，有时无效，例如多次单击

代码笔

代码

$（函数（）{
$（“.animated”）.addClass（“grow one”）；
var$checkbox=$（“.checkbox”）；
var$animatedText=$（“#animatedText”）
$checkbox.change（函数（）{
if（$animatedText.hasClass（“growtone”））{
$animatedText.removeClass（“成长一个”）；
}否则{
$animatedText.removeClass（“增长两倍”）；
}
if（this.checked&！$animatedText.hasClass（“grow two”））{
$animatedText.addClass（“增长两倍”）；
}否则{
if（$animatedText.hasClass（“growtwo”））{
$animatedText.removeClass（“增长两倍”）；
}
$animatedText.addClass（“成长一个”）；
}
});
})

.grow-in.grow-one{
-webkit动画名称：growtone；
动画名称：成长一个；
}
.长大2岁{
-webkit动画名称：成长二；
动画名称：成长二部；
}
.成长{
-webkit变换：比例（0.2）；
变换：比例（0.2）；
不透明度：0；
}
.慢一点{
-webkit动画持续时间：2秒；
动画持续时间：2秒；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
}
.动画{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
}
h1{
字体系列：“Lato”，无衬线；
字体大小：32px；
线高：62px；
字体大小：300；
颜色：#000；
文本对齐：居中；
}
.复选框{
文本对齐：居中；
}
@关键帧增长1{
0% {
变换：比例（0.2）；
不透明度：0；
}
50% {
转换：比例（1.2）；
}
100% {
变换：比例（1）；
不透明度：1；
}
}
@关键帧增长两倍{
100% {
变换：比例（0.2）；
不透明度：0；
}
50% {
转换：比例（1.2）；
}
100% {
变换：比例（1）；
不透明度：1；
}
}

CSS3制作动画
项目1
项目2
项目3
项目4
项目5
项目6

如果将$checkbox.change（）函数替换为以下内容，则其工作原理与您描述的相同：

$checkbox.change(function () {
    $animatedText.toggleClass("grow-two");
  });

---

要在每次更改事件触发时触发动画，只需切换您的类@IvanKaraman谢谢<代码>切换类（）是我需要的好！如果你不介意的话，你能投票接受我的回答吗？