如何在ajax选项卡上设置简单的淡入/淡出效果

Question

我有一个基于ajax数据属性的选项卡代码。选项卡内容按数据属性从 PHP 代码加载 ajax。如何在选项卡内容上设置淡入/淡出效果？我试着做，但我没有成功。

PHP代码： https://ideone.com/ZMmk6f

$(document).ready(function() {
$("#tab-entry").load('index.php', {
tab: 1
});
$("#tab-entry").promise().done(function() {
$("#loading").hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
$(".tab-button").click(function() {
var tab = $(this).attr("data-tab");
var dl = $("#tab-entry").attr("data-load");
if (tab !== dl) {
$(this).parent("li").parent("ul").find(".active").removeClass("active");
$(this).parent("li").addClass("active");
$("#tab-entry").each(function() {
$(this).attr("data-load", tab).hide('normal').load('index.php', {
tab: tab
}).next("#loading").delay(500).show();
});
$("#tab-entry").promise().done(function() {
$("#loading").delay(500).hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab-header0">
<ul id="tab-header">
<li class="active">
<a class="tab-button" data-tab="1">1st Tab</a>
</li>
<li>
<a class="tab-button" data-tab="2">2nd Tab</a>
</li>
<li>
<a class="tab-button" data-tab="3">3rd Tab</a>
</li>
<li>
<a class="tab-button" data-tab="4">4th Tab</a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab-entry" style="display:none" data-load="1"></div>
<div id="loading">Load ... </div>
</div>

Answer 1

我认为这就是您要做的。我已经注释并给出了一个JSFiddle以供参考。在 ajax 中替换您的页面名称等：

$(document).ready(function() {
function doAjax(content)
{
$.ajax({
// Send to 
'url': 'index.php',
'data':{
'html': content
},
'method':'post',
'success':function(response) {
// On done, fade out the current content
$('#loading').fadeOut('slow',function() {
// On done, fade in new content
$(this).html(response).fadeIn('slow');
});
}
});
}
// Load first content
doAjax($('.active').find('a').data('tab'));
// Onclick of the tab
$(this).on('click','.tab-button',function(){
// Remove the instance of active
$('.active').removeClass('active');
// Traverse and add active
$(this).parents('li').addClass('active');
// Load the ajax for this tab
doAjax($(this).data('tab'));
});
});

JSFiddle 示例。