附加元素在 mousemove 上移动不顺畅？答案

【问题标题】：Appended element does not move smoothly on mousemove?附加元素在 mousemove 上移动不顺畅？
【发布时间】：2012-12-09 22:09:08
【问题描述】：

我想在您单击按钮时提供加载提示。以下是我的尝试，

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;

    });


};

但这很有趣，因为loading element - ".loading-tip" 不会随着鼠标平滑移动。它似乎一直很生涩。

但是如果它在一个盒子里，它可以很好地使用鼠标移动。

请看here。

我错过了什么？我该如何解决？

【问题讨论】：

标签： jquery append mouseevent onmousemove

【解决方案1】：

问题似乎只是因为document.body 不是浏览器窗口高度的 100%。因此，当您低于身体底部时，它不再触发 mousemove 事件。

将这两行添加到您的 jsfiddle 并再试一次：

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

【讨论】：

【解决方案2】：

尝试动画而不是设置静态位置，以创建更平滑的过渡。

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

【讨论】：

感谢您的建议。它仍然有同样的问题。但我认为这是 because document.body isn't 100% of the height of the browser window. Jason 指出的。