让某些 JS 代码等到另一个命令完成后再执行

Question

我在 jQuery 中使用 AJAX 并具有以下代码：

getAjaxData(loadUrl, dataObject, 'GET', 'json')

    .done(function(response) {

        if (response.result == 'success') {

            $('#edit-form-holder').html(response.output);

            $('.listing .members-head .extra-cols').hide();

            $("#edit-member").css('display', 'block').animate({opacity: 1.0, left: edit_user_offset}, 1800);            

            $('.listing .members-data .extra-cols').hide();

        } else {

            //........

        }

    })

    .fail(function() {
        //........
    })

// End

getAjaxData 只是对我的自定义函数的引用，与此问题无关。

问题是..

我想要这个代码...

$('.listing .members-data .extra-cols').hide();

等待下面的代码执行完毕..

$("#edit-member").css('display', 'block').animate({opacity: 1.0, left: edit_user_offset}, 1800);

如何做到这一点？

Answer 1

使用animate方法的完整回调

$("#edit-member").css('display', 'block').animate({
    opacity: '1',
    left: edit_user_offset
}, 1800, function() {
    $('.listing .members-data .extra-cols').hide();
});

此外，如果您想将 opacity 值用作 1.0，则应将其放在引号中。不需要添加 .0 到不透明度。如果您想将 1 用作值，也可以将此值用作数字。

您可以使用 show 而不是 css(... 来显示元素。

您可以从 jQuery 文档中阅读有关 animate 的更多信息：http://api.jquery.com/animate/

让某些 JS 代码等到另一个命令完成后再执行

Getting certain JS code to wait until another command finishes for it to execute

javascript

jquery

jquery-animate