Jquery 在导致表格出现的图像上爆炸

Question

我正在为一家公司做复活节活动，我想添加一些漂亮的动画。这是它的要点：

页面以悬停时使用 jrumble 插件发出隆隆声的鸡蛋图像开始（使该部分正常工作）
然后点击鸡蛋图像，它爆炸并消失
在我想要一个表单淡入后立即。

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

表格外观是我苦苦挣扎的地方，我不确定如何编写它才能出现。

我的猜测是在#egg 上使用 .click .explode，然后在单击鸡蛋时切换表单的可见性，但它并没有完全淡入。

我知道这含糊不清，但非常感谢您的帮助，我添加了一个代码片段来提供帮助。

代码也在 jsfiddle 上进行调整，但 jRumble 出于某种原因无法在其上运行。

https://jsfiddle.net/d851fdvk/6/

$(function(){
    $('#egg').jrumble({
    x: 10,
    y: 10,
    rotation: 4,
    speed: 150
    });
    
    $('#egg').hover(function(){
        $(this).trigger('startRumble');
    }, function(){
        $(this).trigger('stopRumble');
    }); 

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.78thkingswood.co.uk/js/jquery.jrumble.1.3.min.js"></script>

<div class="content">
    <p>Crack the egg to see what happens...</p>
    <img id="egg" src="http://abali.ru/wp-content/uploads/2011/10/korichnevoe_yajco.png" Alt="Crack the egg!" />
    
    <form id="form-appear" style="display: none;" role="form">
        <div class="form-group required">
            <label for="inputName" class="col-sm-2 control-label">Name</label>
            <input type="text" class="form-control" id="inputName" name="inputName" placeholder="Name" required="required">
        </div>
        <div class="form-group required">
            <label for="inputEmail" class="col-sm-2 control-label">Email</label>
            <input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Email" required="required">
        </div>      
        <div class="form-group required">
            <label for="inputPhone" class="col-sm-2 control-label">Phone</label>
            <input type="tel" class="form-control" id="inputPhone" name="inputPhone" placeholder="Phone" required="required">
        </div>
    </form>
</div>

Answer 1

修改这部分

  $('#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 库的一部分，您还没有包含它。

Answer 2

我很确定解决方案是：包括 jqueryUI（这是对 jQuery 的补充）。您正在使用 jqueryUI 的效果，但未将其包含在您的依赖项中。

Answer 3

可能是..

您需要在文档头部启动jquery-ui javaScript库才能使用"explode"方法。仅 jquery 库还不够。 https://api.jqueryui.com/explode-effect/

Jquery 在导致表格出现的图像上爆炸

Jquery explode on image that causes form to appear

html

javascript

jquery

fadein