jquery - 在没有过渡的情况下更改一些 CSS 值，然后在更改后立即使用过渡

Question

情况如下：

我有一个元素必须在单击时移动到某个位置而没有过渡，然后立即移动到另一个位置，但现在有了过渡。

首先，我试过这样：

var transform = Modernizr.prefixed('transform'),
    transition = Modernizr.prefixed('transition'),
    style1 = {},
    style2 = {};

style1[transform] = "translate(100px, 20px)";
style1[transition] = "none"; 
style2[transform] = "translate(500px, 50px)";
style2[transition] = "2s"; 

$('div')
    .on('click', function () {
        $(this)
          .css(style1)
          .css(style2);
    });

http://jsfiddle.net/trajektorijus/vUUb5/2/

但这并没有奏效......有人可以解释为什么吗？

我设法做我想做的事，但我认为这不是正确的方法：

var transform = Modernizr.prefixed('transform'),
    transition = Modernizr.prefixed('transition'),
    style1 = {},
    style2 = {};

style1[transform] = "translate(100px, 20px)";
style1[transition] = "none"; 
style2[transform] = "translate(500px, 50px)";
style2[transition] = "2s"; 

$('div')
    .on('click', function () {
        $(this)
            .css(style1)
            .delay()
            .queue(function () {
                $(this)
                    .css(style2)
                    .dequeue();
            });
    });

http://jsfiddle.net/trajektorijus/vUUb5/3/

你能推荐比这更聪明的东西吗？

谢谢！

编辑：另一种选择是：

var $this = $(this);

$this.css(style1);
setTimeout(function () { $this.css(style2); });

http://jsfiddle.net/trajektorijus/vUUb5/5/

Answer 1

像这样的东西？

http://jsfiddle.net/vUUb5/4/

$(function () {
    $('div').on('click', function () {
        $(this).css({top: '20px', left: '100px' })
            .animate({ top: '50px', left: '500px' }, 2000);
    });
});