$.css("转换"，"值")不起作用

var test = $("#test");
test.css("transition","all 500ms");

var delay = "500ms";
test.css({
    'transition': 'all ' + delay,
    '-moz-transition': 'all ' + delay,
    '-webkit-transition': 'all ' + delay,
    '-o-transition': 'all ' + delay
});

我认为您不了解CSS3转换是如何工作的。CSS3转换设置控制如何处理对象的属性更改，以及这些更改是否立即生效，或者是否触发转换以使其随时间转换为新值。

必须进行实际的属性更改才能进行转换。设置转换值本身并不会触发转换，它只是为将来何时发生转换设置规则。

在您的示例中，您必须实际更改一些值才能看到更改。例如：

test.css("height", "100px");

由于您有transition: all，这将触发从当前高度值到新高度值的转换。

例如，这是我几天前为另一个问题创建的CSS3转换：http://jsfiddle.net/jfriend00/P2H4Z/.

在这个例子中，有一个与转换相关的CSS：

.element
{
    background: blue;
    position: absolute;
    left: -100%;
    padding: 0 10px;
    -moz-transition: left 1s; 
    -webkit-transition: left 1s; 
    -o-transition: left 1s; 
    -ms-transition: left 1s; 
     transition: left 1s; 
}

.element.seen {
    left: 0;
}

这将为left属性的转换设置阶段。它不会触发转换。可以通过实际更改具有class="element"的项目的left属性来触发转换。left值的更改可以通过以下方式完成：

1. 将类添加到项或父项，这将导致不同的left值从CSS规则生效
2. 触发伪类生效（如:hover）
3. 用javascript编程更改.left的值

在这个特定的例子中，seen类被添加到对象，这导致左值从-100%变为0。由于定义了transition left 1s，浏览器将在1s的持续时间内从当前-100%值转换为新的0值，因此对象将滑动到位。

var delay = "500ms",
    test  = $("#test");
test.css({
    'transition': 'all ' + delay,
    '-moz-transition': 'all ' + delay,
    '-webkit-transition': 'all ' + delay,
    '-o-transition': 'all ' + delay
}).on('click', function () {
    $(this).css({ left : '+=100' });
});​

步骤1：为转换定义一个css类：

.CustomTransitionClass{
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;}

步骤2：添加类：

 $("#test").addClass('CustomTransitionClass');