jQuery菜单向上/向下滑动div，还可以向右/向左滑动div

Question

我希望有人可以帮助我，因为我偶然发现了一些jquery问题。我想弄清楚的是：

1. 添加类“active”=因此可以在激活时设置标记样式。
2. 垂直滑动上/下div（#information（“关于”和“联系方式”包装））。
3. 在页面div之间左右水平滑动（在“关于”和“联系人”之间。）
4. 如果“关于”或“联系人”应该是活动的“页面”并显示，那么如果再次单击“关于”链接，它应该关闭#information包装器。

This is what I got so far: JSFiddle

HTML：

<div id="information">
     <div id="info-about"></div>
     <div id="info-contact"></div>
</div>
<ul>
    <li><a id="about" class="page" href="#">About</a></li>
    <li><a id="contact" class="page" href="#">Contact</a></li>
</ul>

CSS：

#information {
    width: 200%;
    height: 300px;
    position: relative;
    left: 0;
    display: none;
}

#info-about {
    width: 50%;
    height: inherit;
    background: red;
    float: left;
}

#info-contact {
    width: 50%;
    height: inherit;
    background: blue;
    float: left;
}

jQuery的：

$('li a').click(function(e) {
    e.preventDefault();
    $('a').removeClass('active');
    $(this).addClass('active');

    if ($(this).is('.page.active')) {
        $('#information').slideDown('slow');
    }
});

$('#about').click(function () {
    $('#information').animate({
        left: "0"
    }, 1000);
});

$('#contact').click(function () {
    $('#information').animate({
        left: "-100%"
    }, 1000);
});

如果有人能够帮助我，我将非常感激。此外，我不确定，但是可以将它作为一个组合脚本而不是分成几部分来完成吗？

亲切的问候，莫滕。

Answer 1

这就是https://jsfiddle.net/c01gat3/wa1e8oyv/

之后的情况

$('li a').click(function(e) {
    e.preventDefault();

    if ($(this).hasClass('active')) {
        $('#information').slideUp('slow');
        $('a').removeClass('active');
    } else {
        $('#information').slideDown('slow');
        $('a').removeClass('active');
        $(this).addClass('active');

        if(this.id == 'about'){
            $('#information').animate({
            left: "0"
            }, 1000);

        } else {
            $('#information').animate({
            left: "-100%"
            }, 1000);
        }
    }
});