如何在将ajax内容加载到新添加的jquery ui选项卡后执行回调函数

Jquery UI选项卡有一个add事件，在添加选项卡后立即触发。在此示例中，当您单击某个按钮时，会添加一个新选项卡并将其选中。

Jquery UI tabs has an add event which is triggered immediately after a tab is added. In this example, when you click a button a new tab is added and it is selected.

我正在使用ajax以下列方式添加动态内容：

I'm adding dynamic content using ajax in the following way:

var $tabs = $("#tabs").tabs({
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
    add: function (event, ui){
        var lastIndex = $("#tabs").tabs("length")-1;
        $("#tabs").tabs("select", lastIndex);
    }
});

function createTab(phpFile){
    $tabs.tabs("add", phpFile, "Tab Title"); 
}

$("button").on('click', function (){                   
    var url = "search.php?term=someRandomString";
    createPlaySongTab(url);      
});

我的目标是让新添加的内容逐渐淡入面板

My goal is to have the newly added content fade into the panel like so

    add: function (event, ui){
        $(ui.panel).hide();
        var lastIndex = $("#tabs").tabs("length")-1;
        $("#tabs").tabs("select", lastIndex);
        $(ui.panel).fadeIn(1000);
    }

假设我的.php看起来像这样

Let's say my .php looked like this

<?php sleep(1); echo 'hello world!';?>

在这种情况下，由于淡入淡出的持续时间 fadeIn（1000）并且在添加选项卡后立即触发add事件，而不是在.php文件加载完成后触发。如何在内容完全加载后让内容淡入？

In this case the content would not fade in at all since duration of the fade was fadeIn(1000) and the add event is triggered immediately after the tab is added, not after the .php file is done loading. How can I get the content to fade in after the content has completely loaded?