2

I drawing circle with CSS on the window by mouse position. Then i move cursor slowly nice redrawing, but if i move cursor faster i can see how circle disappearing. How i can redraw smoothly without disappear?

My code what i trying below:

.circle {
    position: absolute;
    width:100px;
    height:100px;
    border-radius:50px;
    border: 1px solid #000
}

<div class="circle"> </div>

$(window).mousemove(function(e) {
    var x = e.clientX;
    var y = e.clientY;

    $(".circle").css("left", x-50); //-50 for center because circle width = 100
    $(".circle").css("top", y-50); //-50 for center because circle height = 100
});

http://jsfiddle.net/rkEMR/3996/

Your choice
  • 395
  • 12
  • 25

2 Answers2

1

Two optimisations that may solve your issue:

  1. cache $(".circle") in variable before mousemove
  2. use transform: translate3d(x,y,z) instead of left+top

See: http://jsfiddle.net/rkEMR/3998/

Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
1

Another way to do it, instead of @zvona said that also works as a charm, is using animate:

<script>
    $(window).mousemove(function(e) {
        var x = e.clientX;
        x = x-50;
        var y = e.clientY;
        y = y-50;

        $(".circle").animate({"left": x+"px", "top": y+"px"}, 0);
    });
</script>

The final 0 is the time in milliseconds to go to cursor. You can make it smoother with, for example, 10 milliseconds.

By the way, I tried your code on Chrome and Firefox, on a MAC, and I don't see it disapearing moveing the cursor faster.

Zander
  • 1,076
  • 1
  • 9
  • 23