Vestige of mouse click

Question

I need a script, that on an entire page where a click appears a ball in the place where it was clicked, but that after a couple of seconds disappeared.

It doesn’t need to be ripples, just something that leaves a trace, an example is Google Maps when you click on the map appear white waves to say that you clicked here.

In place of the ball can also be a picture any.

Answer 1

You can create an element with absolute positioning, and use pageX and pageY to get the mouse click position. Then just put this element in that position:

$(document).click(function(e) {
    $(novoElemento).appendTo("body").css({
        position: "absolute",
        top:e.pageY,
        left:e.pageX
    }).show().delay(2000).hide(0); // O zero é importante, ou o delay não funciona
});

// Alternativa: setTimeout
var bola = $(novoElemento)...
setTimeout(function() {
    bola.hide().remove();
}, 2000);

Example in jsFiddle. (Note: my previous answer suggested clientX and clientY, but this does not work if the content is large enough to show the scroll bar)