1

我有一段代码可以按照预期的方式工作。

function showContent(pos,direction){
$("#area").hide("slide", { direction: direction=="left"?"right":"left"}, 2000);
$("#area").load("flow_forms.jsp #area" + pos);
$("#area").show("slide", { direction: direction }, 500);
}

$('#next').click(function(){
    if(question_pos==0){
        question_pos+=1;
        showContent(question_pos,"right");
        return true;

该区域应该向左滑动，在屏幕外加载，然后从右侧滑入加载的区域内容。

基本上我遇到的问题是 .load 发生在 .hide 之前。所以我所拥有的是一个在向左滑动时加载的区域，然后从右侧引入已经加载的区域。我的老板建议了一个回调函数，但我什至不知道那是什么......

4

2 回答 2

1

您可以.load通过使用完成回调或在元素的动画队列上接受“承诺”来等待第一个动画完成：

$("#area").hide(...).promise().done(function() {
    $("#area").load(..., function() {
        $(this).show(...);
    });
});

不过，实际上有一个更好的选择，它可以让您在动画正在进行时开始.load- 这将更具响应性：

var $tmp = $('div');

var loaded = $.Deferred(function() {
    $tmp.load(...);  // load into an off-screen div
    this.resolve();
});

var hidden = $('#area').hide(...).promise();

$.when(loaded, hidden).done(function() {
    // move #tmp contents to #area and show it
    $('#area').empty().append($tmp).show();
});

这$.when()要求 AJAX 加载和动画都已完成，同时允许它们同时进行。

于 2013-03-11T17:37:09.460 回答
0

您应该使用回调函数- 一旦当前函数完成执行，这些函数就会运行，如下所示：

function showContent(pos,direction){
    $("#area").hide("slide", { direction: direction=="left"?"right":"left"}, 2000,      
        function(){
            $("#area").load("flow_forms.jsp #area" + pos, function(){
                $("#area").show("slide", { direction: direction }, 500);
            }); // Load callback 
        } // Hide callback            
    );
}
于 2013-03-11T17:37:17.430 回答