Question

目标

要创建选项卡式界面，请设置动画，以便在单击其他选项卡时内容淡出，然后容器调整大小（通过向上或向下滑动），然后新内容淡入。

问题

我已成功制作了一个可用的标签式界面，但我无法按照我想要的方式制作动画。当您单击选项卡时，面板向下滑动，您可以看到淡入文本然后再次向上滑动 - 我不知道为什么。

这是我第一次使用jquery，如果有人快速查看并找出我做错了什么/如何修复它，我真的很感激。这是一个非常简单的项目，所以我怀疑那些知道自己在做什么的人会非常困难！

这是jsfiddle：http://jsfiddle.net/dronzy/MKmTK/

这是javascript的样子：

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

提前致谢！

Answer 1

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

jquery：使用带有选项卡式容器的slideDown和动画不透明度

1 个答案: