Jquery explode on image that causes form to appear

Question

I'm doing an Easter campaign for a company and I'm trying to add some nice animation. Here's the jist of it:

• Page starts off with an image of an egg rumbling using jrumble plugin on hover (got that part working)
• Then on clicking the egg image, it explodes and disappears
• instantly after I'd like a form to fade in.

I'm no JS wizz so I'm not sure how this sequence will work with the code, I have the right explode method in place but I'm clearly missing something as it's not working.

The form appearance is where I'm struggling, I'm not sure how to write it for it to appear.

My guess is using .click .explode on #egg and then toggle visibility of the form as the egg is clicked, but then it doesn't exactly fade in.

I'm aware this is vague but I'd really appreciate the help, I've added a code snippet to help.

Code is also on jsfiddle to tweak but jRumble isn't working on their for some reason.

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

I'm pretty sure the solution is : include jqueryUI (which is additional to jQuery). You're using jqueryUI's effects, but not including it in your dependencies.