Question

我正在为一家公司做复活节活动，我正在尝试添加一些不错的动画。这是它的主旨：

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

我不是JS wizz因此我不确定这个序列如何与代码一起使用，我有正确的爆炸方法，但我显然遗漏了一些因为它不起作用。

表格外观是我挣扎的地方，我不知道怎么写它才能出现。

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

我知道这很模糊，但我真的很感激帮助，我添加了一个代码片段来帮助。

代码也在jsfiddle上进行调整，但jRumble由于某些原因不能正常工作。

$(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

chnage这部分

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

到此

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

这是一个将在click事件后运行的回调函数。

此外，爆炸是jquery Ui库的一部分，你还没有把它包括在内。

Answer 2

我非常确定解决方案是：include jqueryUI（这是jQuery的补充）。您正在使用jqueryUI的效果，但不包括在您的依赖项中。

Answer 3

可能是......

你需要在文档头部启动jquery-ui javaScript库来使用＆＃34; explode＆＃34;方法。它不仅仅是jquery库。 https://api.jqueryui.com/explode-effect/

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

3 个答案: