How to clear class without setTimeout in jQuery -

i'm trying bind every click on "body" little animation under cursor: http://jsfiddle.net/nippon/parr3/

var timeouthandle = settimeout(function(){ $(".click").removeclass("clickon"); }, 1000);  $('html').click(function(e){     e.preventdefault();       $(".click").addclass("clickon");       cleartimeout(timeouthandle);       settimeout(function(){ $(".click").removeclass("clickon"); }, 1000);     }); 

the problem don't know how addclass , remove on same click. i'm using settimeout , it's working slow clicks , no double clicks. when start clicking mad man animation going hell.

can me clean mess i've made , make smooth/double-click-proof?

i took different approach. created new element each click. here 2 options:

http://jsfiddle.net/kxjkk/

$(document).bind('mousemove', function (e) {     $('#clickwrapper').css({         left: e.pagex - 20,         top: e.pagey - 20     }); });  $('html').click(function (e) {     e.preventdefault();     var $div = $('<div class="click"></div>')         .appendto('#clickwrapper')         .addclass('clickon');      settimeout(function () {         $div.remove();     }, 1000); }); 

http://jsfiddle.net/ktdn7/

var left; var top;  $(document).bind('mousemove', function (e) {     left = e.pagex - 20,     top = e.pagey - 20 });  $('html').click(function (e) {     e.preventdefault();     var $div = $('<div class="click"></div>')         .css({ top: top, left:left})         .appendto('#clickwrapper')         .addclass('clickon');      settimeout(function () {         $div.remove();     }, 1000); });