使用javascript / jquery动画像气球爆破一样

Question

我想让图像破碎，这个动画应该无限延续。请告知如何进行此操作？是否可以使用jquery animate函数来实现此目的。

Answer 1

试试这个，  http://jsfiddle.net/Dripple/AGGrv/。 这样可以制作出一个精美的动画片来爆破气球。

$("#bubble1").click(function() {
    $("#bubble1").stop(true, false);
    $(this).hide("explode", {
        pieces: 50
    }, 250);
});

function animate1() {
    $("#bubble1").animate({
        "-moz-border-radius": "110px/100px",
        "-webkit-border-radius": "110px 100px",
        "border-radius": "110px/100px",
        height: '100px',
        width: '110px',
        top: '240px'
    }, 1500, animate2());
}

function animate2() {
    $("#bubble1").animate({
        "-moz-border-radius": "100px/110px",
        "-webkit-border-radius": "100px 110px",
        "border-radius": "100px/110px",
        height: '110px',
        width: '100px',
        top: '235px'
    }, 1500, function() {
        $('#bubble1').trigger('mouseover');
    });
}

$("#bubble1").mouseover(function() {
    animate1();
});

$("#bubble1").mouseout(function() {
    $("#bubble1").stop(true, false);
});