Javascript Jquery在导致窗体出现的图像上爆炸

我正在为一家公司做复活节活动，我正在尝试添加一些漂亮的动画。以下是它的jist：

• 页面以一个鸡蛋隆隆作响的图像开始，在hover上使用jrumble插件（让该部分正常工作）
• 然后单击鸡蛋图像，它爆炸并消失
• 我想要一张淡入的表格

我不是JS wizz，所以我不确定这个序列将如何与代码一起工作，我有正确的explode方法，但我显然遗漏了一些东西，因为它不起作用

表单外观是我努力的地方，我不知道如何编写它以使其出现

我的猜测是使用。单击。在#egg上爆炸，然后在单击egg时切换窗体的可见性，但它不会完全消失

我知道这是含糊不清的，但我真的很感谢您的帮助，我添加了一个代码片段来帮助您

代码也在JSFIDLE上进行调整，但由于某些原因，jRumble无法在其上运行

$（函数（）{
$（“#蛋”）.jrumble({
x:10，
y:10，
轮换：4，
速度：150
});
$（'#egg'）。悬停（函数（）{
$（this.trigger（'startRumble'）；
}，函数（）{
$（this.trigger（'stopRumble'）；
}); 
$（'#egg'）。单击（函数（）{
$（this.hide（'explode'，{pieces:16}，2000）；
});
$（'#egg'）。单击（函数（）{
$（'.form'）.fadeIn（“慢”）；
});
});

打开鸡蛋看看会发生什么

名称
电子邮件
电话
更改此部分

  $('#egg').click(function() {
      $(this).hide('explode', {pieces: 16 }, 2000);
    });

对此

  $('#egg').click(function() {
      $(this).hide('explode', {pieces: 16 }, 2000,function(){
                                           $('#form-appear').fadeIn(slow); 
        });
    });

它是一个回调函数，将在单击事件后运行

另外，explode是jquery Ui库的一部分，您还没有包括它。
我很确定解决方案是：包括jqueryUI（它是jquery的附加部分）。您正在使用jqueryUI的效果，但未将其包含在依赖项中。
可能是

您需要在文档的头部初始化jQueryUIJavaScript库以使用“分解”方法。仅仅jquery库还不够。
.hide（'explode'）
？这是JRuble插件的一部分吗？不，这是一个简单的jquery效果。小提琴一点也不响。什么都没动。。。如果你只是想让表单淡入，为什么不干脆
$（“#表单出现”）.fadeIn（）
？好吧，我不知道那一个（爆炸），我知道，这就是我不明白的，为什么它没有反应？这是问题，代码看起来不错，但点击后什么都没有发生。我甚至删除了其他代码行，只是为了看看这是否有效，仍然没有任何结果。有什么我遗漏的吗？为回调函数干杯圣诞老人真烦人，干杯伙计。我没有意识到我需要加载UI。现在一切都很好。哈哈，这发生在我们当中最好的人身上=）