Question

I’m trying to apply css3 transition on the fly, but jquery doesn’t do anything.

code

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

i also tried

var delay = "500ms";

test.css({
    'transition': 'all ' + delay,
    '-moz-transition': 'all ' + delay,
    '-webkit-transition': 'all ' + delay,
    '-o-transition': 'all ' + delay
});

What’s wrong with my code?

Updated:

“jquery doesn’t do anything” literally means that it doesn’t apply style to the element. I don’t mean that the element doesn’t move.

Correction:

it actually works…it was my browser.

Answer 1

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' });
});​

http://jsfiddle.net/YwfjF/

You can see that it works, but you have to change a property for it to be animated.

Here is a great reference for CSS3 transitions: https://developer.mozilla.org/en/CSS/transition (notice the links at the bottom that describe the different parts of the transition declaration).