javascript - 如何在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 Example .