javascript - 带有css转换的jquery，有时它不起作用

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 动画完成事件这样的转换。

Answer 1

而不是使用 setTimeout 使用delay()

语法是这样的

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

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

在这种情况下，您将使用

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

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