動畫像氣球爆裂使用javascript/jquery

Question

我想做一個圖像爆裂，這個動畫應該繼續infinetly。請問如何處理這個問題？是否有可能使用jQuery的動畫功能來實現這一點。

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); 
});