jQuery切换（脉动）一个图标到另一个图标

我努力做到以下几点：

我使用的是MDI图标集，但它当然应该与任何其他图标（fa，…）相同。我们已经建立并运行了一个票证系统，我们也在实施类似“建议功能”的东西

现在，表单的“提交”按钮旁边有一个图标：

我发现jquery有

$（“#toggle”）.toggle（“pulsate”）也一样，它看起来很棒

让我们想象“o”是一个不亮的灯泡，“ö”是亮着的灯泡。
如果在用户点击灯泡之前，灯泡一直关着，看起来会很棒。而且灯泡在闪烁。就像一个老灯泡。当然，提交的延迟本身也应该延迟

默认图标为mdi灯泡（o），单击mdi灯泡打开（ö）时，mdi灯泡图标上的mdi灯泡应闪烁

编辑：按钮是type=“button”，用于测试效果，在尝试时不会永久重新加载站点

这对你有帮助

<button type="button" class="btn btn-success toggleicon">
    <i class="mdi mdi-lightbulb tochange"></i>
    <i class="mdi mdi-lightbulb-on tochange" style="display:none;"></i>         
    Idee absenden
</button>

*************************************************************


缺席一事
*************************************************************



缺席一事
*************************************************************
$（'.toggleicon'）。在（'click'，function（）上{
//$（'.tochange'）。removeClass（'mdi-lightbulb'）；
//$（'.tochange'）.addClass（'mdi-lightbulb-on'）；
$（'.tochange'）。切换（“脉动”）；
});
$（'form'）。提交（函数（事件）{
var formId=this.id，
形式=此；
我的特殊功能（formId）；
event.preventDefault（）；
setTimeout（函数（）{
表单提交（）；
}, 1000);
}); 
您可以使用而不是
切换
，这样它就不会隐藏目标元素，从这里您可以简单地在类之间切换，而不是在元素的可见性之间切换


$（“#灯泡”）。单击（函数（）{
var$bulb=$（此）；
变量状态=$bull.data（'on'）；
var开关={
“错误”：“mdi灯泡打开”，
“true”：“mdi灯泡轮廓”
};
$（'.mdi'，this）.effect（'脉动'{
完成：函数（）{
$bulb.data（'on'，！state）；
$（this.removeClass（this.className）.addClass（'mdi'+开关[state]）；
}
})
});
#灯泡>.mdi灯泡打开{
颜色：#ef950f；
}

轻的
请再次解释问题？一个按钮，默认图标为mdi lightbulb，单击“打开mdi lightbulb”，mdi lightbulb图标上的mdi lightbulb就会闪烁，谢谢您的回复。我也有这个解决方案，但它并没有达到我所希望的效果。我在寻找自己的脉动效应。像这里显示的一样
  $('.toggleicon').on('click', function(){
    $('.toggleicon').find('i').toggleClass('mdi-lightbulb mdi-lightbulb-on');
  });

<button type="button" class="btn btn-success toggleicon">
    <i class="mdi mdi-lightbulb tochange"></i>
    <i class="mdi mdi-lightbulb-on tochange" style="display:none;"></i>         
    Idee absenden
</button>

*************************************************************