2

我正在尝试使用 sin/cos 函数将 4 个矩形框转换为。但它在 chrome/firefox 中不起作用。但是在 IE 中，它可以工作。下面给出的是代码，您可以在jsfiddle 中看到演示。

(function() {
    var circle = $(".circle"),
        circleChild = $(".circle-child", circle),
        circleChildLength = circleChild.find("li").length,
        isDragged = false,
        speed = 5,
        angles = [],
        initialDistance = 0,
        totalDistance = 150;

    function moveChildCircles() {
        initialDistance += speed;
        if(initialDistance >= totalDistance  || initialDistance <= 0) {
            speed = -speed; 
            isDragged = !isDragged;
        }

      /* This doesn't work, it works only when I set either translateX or translateY     (not both). */

        circleChild.find("li").each(function(i) {
            $(this).css("transform", "translate(" + initialDistance*Math.cos(angles[i]) + "px," + initialDistance*Math.sin(angles[i]) + "px)");
        });
    }

    circle.click(function() {
        var addAngle = Math.PI*2/circleChildLength;

        for(var i = 0; i < circleChildLength; i++) {
            angles[i] = i*addAngle;
        }   
        isDragged = !isDragged;
    });



    (function animate() {

        requestAnimationFrame(animate);
        if(isDragged) {
            moveChildCircles();
        }
    }());

}());

如您所见，这仅适用于 translateX/translateY 中的任何一个。当我调试这个时， animate() 方法只更新第一个 li 值。为什么？

4

1 回答 1

2

由于数学评估为小数像素，因此 CSS 更改似乎不起作用。尝试Math.round在您的像素计算中使用：

$(this).css("transform", "translate(" + Math.round(initialDistance*Math.cos(angles[i])) + "px," + Math.round(initialDistance*Math.sin(angles[i])) + "px)");

示范

于 2013-10-17T17:38:56.477 回答