Appended element does not move smoothly on mousemove?

Question

I want to make a loading tip when you click on a button. Below is my attempt,

this.mouse_loader_click = function(){   

    /* CONFIG */        
    xOffset = 10;
    yOffset = 20;       

    $(".mouse-loader").click(function(e){

        /* append the popup */
        $(document.body).append("<p class='loading-tip'>Loading</p>");
        $(".loading-tip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");

        $(document.body).mousemove(function(e){
            $(".loading-tip")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px");
        });

        return false;

    });


};

But it works funny because the loading element - ".loading-tip" does not move along with the mouse smoothly. It seems jerky all the time.

But it works fine and moves smoothly with the mouse if it is inside a box.

Have a look here please.

What have I missed? How can I fix it?

Answer 1

The problem appears to only be because document.body isn't 100% of the height of the browser window. Thus when you get below the bottom of the body it no longer is firing the mousemove event.

Add these two lines to your jsfiddle and try it again:

html { height:100%; }
body { height:100%; }

Answer 2

Try animating instead of setting static positions, to create smoother transitions.

$(document.body).mousemove(function(e){
    $(".loading-tip").stop().animate({
        top     : (e.pageY - xOffset) + "px",
        left    : (e.pageX + yOffset) + "px"
    }, 100); // 100 is the desired time in milliseconds from point A to point B, play with it if it's not smooth enough for you :)
});