jquery与css过渡，有时它不起作用

Question

此处示例：

http://jsfiddle.net/gL38G/

$(function () {

    $(document.body).on('click', '.testA', function () {
        $('.partA').show().css('left', '200px');
    })
        .on('click', '.testB', function () {
        $('.partB').show();
        window.setTimeout(function () {
            $('.partB').css('left', '200px');
        }, 50);
    })
        .on('click', '.reset', function () {
        $('div[class*=part]').css('left', 0).hide();
    });
});

所以我必须添加延迟来进行其他转换。

有没有好办法解决这个问题？

我怎么知道转换结束了，我想像jquery animate完成事件一样使用转换。

Answer 1

使用delay()

而不是使用setTimeout

语法是这样的

$('.partB').show().delay(50).css('left', '200px');

或者，如果您希望在show事件结束时触发它，请查看show()的文档，它接受“完整”回调参数。

在这种情况下，你会使用

$('.partB').show(0, function() {
    $('.partb').css('left', '200px');
});

其中0是持续时间，函数参数是“完整”回调。