jquery .css() 中的变量答案

【问题标题】：Variable in jquery .css()jquery .css() 中的变量
【发布时间】：2015-03-02 12:26:42
【问题描述】：

所以，我有一个问题。我想将 div 旋转为“anVar”的值

我现在有了这个：

function something() {
  $('.class').css('-webkit-transform:rotate('anVar'deg)')
}

之后的 css 应该是这样的：

.class {
  -webkit-transform:rotate(220deg);
}

谢谢

【问题讨论】：

试试这个 $('.class').css('-webkit-transform:rotate('+ anVar + 'deg)')
$('.class').css('-webkit-transform', 'rotate(' + anVar + 'deg)')

标签： javascript jquery css variables rotatetransform

【解决方案1】：

不要忘记添加所有浏览器前缀。我喜欢创建一个对象来处理这样的变换：

var transformFn = {
    rotate: function(object, degree) {
        $(object).css({
            '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)',
            'zoom': 1
        });
    }
};

称呼它：

transformFn.rotate($('.class'), 220);

调用此函数会将对象旋转 220 度，但再次调用它不会再将其旋转 220 度。如果您想保留状态（从当前旋转而不是 0 旋转对象），您可以将旋转函数更改为：

rotate: function(object, degree) {
    if ($(object).attr('data-rotation')) {
        degree = parseInt($(object).attr('data-rotation')) + degree;
    }
    $(object).css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        'transform': 'rotate(' + degree + 'deg)',
        'zoom': 1
    });
    $(object).attr('data-rotation', degree);
}

【讨论】：