将动画添加到jQuery内容选项卡

Question

我有这个jQuery内容选项卡，它运行良好，但它没有任何动画。我想在单击选项卡时为内容设置动画（显示下一个内容）。我想要一个你可以帮助的淡化动画效果和任何其他效果（滚动等）。

fiddle上的演示。

这里是jQuery：

$(function() {
    $('.tab-content').hide();
    $('#tabs-nav a').bind('click', function(e) {
        $('#tabs-nav a.current').removeClass('current');
        $('.tab-content:visible').hide();
        $(this.hash).show();
        $(this).addClass('current');
        e.preventDefault();
    }).filter(':first').click();
});

我真的很感激任何帮助。

谢谢。

Answer 1

fiddle

上的工作演示

这是一个fadeIn，fadeOut效果。

$(function() {
    $('.tab-content').hide();
    $('#th-tab-one').fadeIn('slow');
    $('#one').click(function() {
        $('.tab-content').hide();
        $('#th-tab-one').fadeIn('slow');
    })

    $('#two').click(function() {
        $('.tab-content').hide();
        $('#th-tab-two').fadeIn('slow');
    })

    $('#three').click(function() {
        $('.tab-content').hide();
        $('#th-tab-three').fadeIn('slow');
    })
});

Answer 2

Fade In/Out

$(function () {
  $('.tab-content:not(:first)').hide();
   $('#tabs-nav a').bind('click', function (e) {
    e.preventDefault();
    $this = $(this);
    $target = $(this.hash);
    $('#tabs-nav a.current').removeClass('current');
    $('.tab-content:visible').fadeOut("slow", function () {
        $this.addClass('current');
        $target.fadeIn("slow");
    });
  }).filter(':first').click();
});

同样你可以做到

Slide Up/Down

旁注：使用jQuery隐藏所有标签，然后触发点击似乎是hacky，我使用css设置初始状态，如this和this < / p>

Answer 3

你可以这样做：

$(function(){
     $('.tab-content').hide();
     $('#tabs-nav a').bind('click', function(e){
         $('#tabs-nav a.current').removeClass('current');
         $('.tab-content:visible').slideUp();
         $(this.hash).slideToggle("slow");
         $(this).addClass('current');
         e.preventDefault();
     }).filter(':first').click();
});