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?

score 1 · Answer 1 · answered Dec 22 '12 at 18:06

1

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 :)
});

answered Dec 22 '12 at 18:06

Bryan

6,682
2
17
21

thank you for the suggestion. It still have the same problem. but I think it is `because document.body isn't 100% of the height of the browser window.` as Jason pointed out. – Run Dec 22 '12 at 18:18

score 1 · Accepted Answer · answered Dec 22 '12 at 18:08

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%; }

Appended element does not move smoothly on mousemove?

2 Answers2