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 animate complete event 这样的过渡。

Answer 1

而不是使用 setTimeout 使用 delay()

语法是这样的


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


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

在那种情况下你会使用

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

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