Dream Night Animation with Jquery

The DreamNight is a screen saver in my friend's cellphone, I tried to implement it on web with help of Jquery and CSS.

Idea
This is an animation in which colored bubbles appear on random positions, grow in size and then fade out. This effect really looks so cool.
Code
CSS
The Dreams are at the absolute position.

body{
background:black;
overflow:hidden;
}
.drawingpix {
position:absolute;
top:-50px;
left:-50px;
}

JavaScript: Jquery

//the function that creates dream
function dream(){
//calculating random color of dream
var color = 'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';

//calculating random X position
var x = Math.floor(Math.random()*$(window).width());

//calculating random Y position
var y = Math.floor(Math.random()*$(window).height());

//creating the dream and hide
drawingpix = $('').attr({class: 'drawingpix'}).hide();

//appending it to body
$(document.body).append(drawingpix);