javascript - 每 5 秒更改一次 div 的旋转方向

Question

我有两个 div(即 div1 和 div2)，div1 逆时针旋转，其他 div2 顺时针旋转。现在我希望两个 div 在每 5 秒后连续改变它们的旋转方向，就像 div1 在 5 秒后顺时针旋转它逆时针旋转然后在 5 秒顺时针方向等连续旋转。相同的过程应用于另一个 div..

<div id="div1" style="height:100px; width:100px; border:2px solid gray">div1 </div>
<div id="div2" style="margin-top:100px; height:100px; width:100px; border:2px solid Red">div2</div>

<script>
     rotate(0,0);
     function rotate(degree1, degree2) {
            $("#div1").css({ WebkitTransform: 'rotate(' + degree1 + 'deg)' });
            $("#div2").css({ WebkitTransform: 'rotate(' + degree2 + 'deg)' });
            $("#div1").css({ '-moz-transform': 'rotate(' + degree1 + 'deg)'}); 
            $("#div2").css({ '-moz-transform': 'rotate(' + degree2 + 'deg)'}); 
            timer = setTimeout(function () {
                rotate(++degree1, --degree2);
                }, 5);
            } 
</script>

Answer 1

如果我正确理解你的问题，这就是你需要的代码(这里是 sample fiddle ):

var invert = false;
startRotating();
function startRotating() {
    rotate(0, 0);
    setTimeout(invertRotate, 5000);
}
function invertRotate() {
    invert = !invert;
    setTimeout(invertRotate, 5000);
}
function rotate(degree1, degree2) {
    $("#div1").css({
        WebkitTransform: 'rotate(' + degree1 + 'deg)'
    });
    $("#div2").css({
        WebkitTransform: 'rotate(' + degree2 + 'deg)'
    });
    $("#div1").css({
        '-moz-transform': 'rotate(' + degree1 + 'deg)'
    });
    $("#div2").css({
        '-moz-transform': 'rotate(' + degree2 + 'deg)'
    });
    setTimeout(function () {
        invert ? rotate(++degree1, --degree2) : rotate(--degree1, ++degree2);
    }, 5);
}