0

THE AIM

To create a tabbed interface, animated such that when you click on a different tab, the content fades out, then the container resizes (by sliding up or down), and then the new content fades in.

THE PROBLEM

I've successfully made a tabbed interface that works but I'm having trouble animating it how I want it. When you click on a tab, the panel slides down, you catch a glimpse of the text fading in but then it slides back up again - and I have no clue as to why.

This is my first time using jquery and I'd really appreciate it if someone would take a quick look and find out what I've done wrong/how to fix it. It's quite a simple project so I doubt it'll be very difficult for someone who knows what they're doing!

Here's the jsfiddle: http://jsfiddle.net/dronzy/MKmTK/

Here's what the javascript looks like:

$(document).ready(function () {
    $('#tabs li a:not(:first)').addClass('inactive');
    $('.content:not(:first)').animate({
        opacity: "0"
    }, 0);
    $('.panel:not(:first)').hide();
    $('#tabs li a').click(function () {
        var t = $(this).attr('href');
        var s = $(this).attr('data-name');
        if ($(this).hasClass('inactive')) {
            $('#tabs li a').addClass('inactive');
            $(this).removeClass('inactive');
            $('.content').animate({
                opacity: "0"
            }, 600, function () {
                $('.panel').slideUp();
            });
            $(s).slideDown(600, function () {
                $(t).animate({
                    opacity: "1"
                }, 600)
            });
        }
        return false;
    })
});

Thanks in advance!

4

1 回答 1

1

试试这个小提琴http://jsfiddle.net/MKmTK/1/。content您正在使用 class和为所有项目设置动画panel，您可以使用:visible它来仅获取当前可见的项目，我还在slideDown回调中移动了 ，以便在隐藏完成后执行它。

于 2013-04-15T21:49:43.280 回答