如何創建一個更好的爆炸效果

Question

我有一個動畫，我試圖完成，應該類似於從下面出現的氣泡，然後點擊，展開顯示文本。

電流效應由該位的代碼製成：

jQuery('.bubble1').on('click', function() { 
jQuery(this).stop(true,true).hide('explode', { pieces: 75 } , 1000, function() { 
    jQuery('.corpo-del-testo').show(); 
}); 
}); 

I've also made a jsFiddle to demonstrate the effect。

我想有更好的爆發效果，但我找不到解決方案，任何人都有類似的問題，或知道如何實現像更現實的爆炸泡沫？就像一陣爆發。

在此先感謝。

Answer 1

這是我創建的另一個泡泡彈出效果。

http://jsfiddle.net/EkZBg

<div id="content"> 
    <div id="bubble"></div> 
    <div id="dummy_debris" class="debris" /> 
</div> 

<script> 

$(function(){ 
    // Document is ready 
    $("#bubble").on("click", function(e) { 
    pop(e.pageX, e.pageY, 13); 
    }); 
}); 

function r2d(x) { 
    return x/(Math.PI/180); 
    } 

    function d2r(x) { 
    return x * (Math.PI/180); 
    } 

    // Specify particle_count as 10 + Math.random()*10 to make things interesting! 
    function pop(start_x, start_y, particle_count) { 
    arr = []; 
    angle = 0; 
    particles = []; 
    offset_x = $("#dummy_debris").width()/2; 
    offset_y = $("#dummy_debris").height()/2; 

    for (i = 0; i < particle_count; i++) { 
     rad = d2r(angle); 
     x = Math.cos(rad)*(80+Math.random()*20); 
     y = Math.sin(rad)*(80+Math.random()*20); 
     arr.push([start_x + x, start_y + y]); 
     // You could use an IMG tag here instead to make the particles sprites 
     z = $('<div class="debris" />'); 
     z.css({ 
     "left": start_x - offset_x, 
     "top": start_y - offset_x 
     }).appendTo($("#content")); 
     particles.push(z); 
     angle += 360/particle_count; 
    } 

    $.each(particles, function(i, v){ 
     $(v).show(); 
     $(v).animate({ 
     top: arr[i][1], 
     left: arr[i][0], 
     width: 4, 
     height: 4, 
     opacity: 0 
     }, 600, function(){ 
     $(v).remove() 
     }); 
    }); 
    } 
</script> 

<style> 
/* Add browser prefixes as-needed. See CSS3please.com */ 
.debris { 
display: none; 
position: absolute; 
width: 28px; 
height: 28px; 
background-color: #ff00ff; 
opacity: 1.0; 
overflow: hidden; 
border-radius: 8px; 
} 

#bubble { 
    position:absolute; 
    background-color: #ff0000; 
    left:150px; 
    top:150px; 
    width:32px; 
    height:32px; 
    border-radius: 8px; 
    z-index: 9; 
} 
</style>