Question

我创建了一些标签内容的演示，无法理解在点击时如何淡入和淡出内容，因此内容不会忽略标签页。

$('#tab-wrapper li:first').addClass('active');
$('#tab-body > div').hide();
$('#tab-body > div:first').show();
$('#tab-wrapper a').click(function() {
    $('#tab-wrapper li').removeClass('active');
    $(this).parent().addClass('active');
    var activeTab = $(this).attr('href');
    $('#tab-body > div:visible').hide();
    $(activeTab).show();
    return false;
});

Answer 1

试试这个 - ＆gt;使用fadeIn和fadeOut以及show

的hide和

$('#tab-wrapper li:first').addClass('active');
$('#tab-body > div').fadeOut();
$('#tab-body > div:first').fadeIn();
$('#tab-wrapper a').click(function() {
    $('#tab-wrapper li').removeClass('active');
    $(this).parent().addClass('active');
    var activeTab = $(this).attr('href');
    $('#tab-body > div:visible').fadeOut();
    $(activeTab).fadeIn();
    return false;
});

位置

{{1}}

Answer 2

只需使用fadeIn（）代替show和fadeOut（）而不是隐藏在代码中

喜欢

$('#tab-body > div:visible').fadeOut();
    $(activeTab).fadeIn();

Jsut检查http://jsfiddle.net/kka284556/PtjKL/2/

Answer 3

您可以通过编辑代码进行“传统”转换：

  $('#tab-body > div:visible').hide("slow");
  $(activeTab).show("slow");

Answer 4

我说尽快隐藏活动标签。然后.fadeIn()选中标签; .fadeOut()然后.fadeIn()看起来不太好恕我直言。

$('#tab-body > div:visible').hide();
$(activeTab).fadeIn();

<强> fiddle

FadeIn FadeOut Javascript标签

4 个答案: