为jQuery内容选项卡添加动画

pvcm50d1 于 2022-12-12 发布在 jQuery

关注(0)|答案(3)|浏览(131)

我有这个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();
});

我将非常感激你的帮助。

谢谢-谢谢

jquery

来源：https://stackoverflow.com/questions/25589616/add-animation-to-jquery-content-tabs

3条答案

按热度按时间

jv4diomz1#

fiddle上的工作演示

这是一种淡入淡出效果。

$(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');
    })
});

赞(0）回复(0）举报 2022-12-12

h22fl7wq2#

Fade In/Out的第一个字符

第一个
同样你也可以这样做

Slide Up/Down（第一个字母）

旁注：* 使用jQuery隐藏所有选项卡，然后触发单击似乎有点笨拙，我会使用this和this之类的css设置初始状态

赞(0）回复(0）举报 2022-12-12

xj3cbfub3#

您可以执行以下操作：

$(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();
});

赞(0）回复(0）举报 2022-12-12

我来回答

为jQuery内容选项卡添加动画

3条答案

fiddle上的工作演示

Fade In/Out的第一个字符

Slide Up/Down（第一个字母）

相关问题

热门标签

最新问答