使用jQuery更改-webkit-transform无法正常工作

Question

我制作了一个简单的jQuery脚本来创建一条线并使其随光标一起移动。 在这里找到它的小提琴。

这就是我分配坡度的方式

$("#line").css({
    "width": + width +"px", 
    "height": "4px", 
    "-webkit-transform": "rotate(" + slope + "deg)", 
    "-moz-transform": "rotate(" + slope + "deg)"
});

该行在Chrome中闪烁，在Firefox中不起作用。 这可能是什么原因？

Answer 1

尽管如前所述，建议使用不带供应商前缀的transform （因为jQuery 自动为您添加了供应商前缀），但这不是问题的根源。 我意识到使用event.offsetX和event.offsetY会产生冲突值，这些值会在event.offsetX event.offsetY不断在正值和负值之间翻转，从而导致斜率计算陷入僵局（因此闪烁）。

我创建了一个小提琴，以演示offsetX/Y和clientX/Y测量方式有何不同，以及为什么最好使用后者：

而是使用.clientX和.clientY对象：

$(document).bind("mousemove", function(event) {
    if (getClickStarted){

        if (event && event.preventDefault){
            event.preventDefault();
        }

        // Use clientX/Y instead of offsetX/Y
        curX = event.clientX;
        curY = event.clientY;

        var width = Math.sqrt(Math.pow(curX - centerX, 2) + Math.pow(curY - centerY, 2));
        var slope = Math.atan2(curY - centerY, curX - centerX)*180/Math.PI;

        // Use unprefixed transform
        $("#line").css({
            "width": + width +"px",
            "height": "4px",
            "transform": "rotate(" + slope + "deg)"
        });
    }
});

在此处查看固定的小提琴： http : //jsfiddle.net/teddyrised/hepbob75/12/

Answer 2

您没有使用标准transform ：

$("#line").css({
   "width": + width +"px", 
   "height": "4px", 
   "-webkit-transform": "rotate(" + slope + "deg)", 
   "-moz-transform": "rotate(" + slope + "deg)",
   "transform": "rotate(" + slope + "deg)"//make sure works in newer browsers
});

顺便说一句，这也应该起作用：

$("#line").css({
  "width": + width +"px", 
  "height": "4px", 
  "transform": "rotate(" + slope + "deg)"// jQuery adds vendor prefixes.
});