Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Свайп меню</title>
        <meta charset="utf-8">
        <meta content="Официальный сайт кафедры И4 БГТУ &laquo;Военмех&raquo;" name="description">
        <meta content="И4, Кафедра, БГТУ, Военмех, официальный сайт" name="keywords">
        <link rel="stylesheet" href="SwipeMenu.css">
        <script src="http://yandex.st/jquery/2.1.0/jquery.js"></script>
        <script src="jquery-2.1.0.js"></script>
        <script src="swipemenu.js"></script>

</head>
    <body>
    <script src="http://yandex.st/jquery/2.1.0/jquery.js"></script>
    <script src="jquery-2.1.0.js"></script>
        <script src="swipemenu.js"></script>
     <div id="container">
    <div id="inner">
        <div id="home">
            <button id="sorokin">Сорокин</button><br><br>
            <button id="ivanov">Иванов</button><br><br>
            <button id="petrov">Петров</button>
        </div>
        <div class="member-home" data-href="sorokin">
            <button>Назад</button>
            <br>Фото Сорокина
        </div>
        <div class="member-home" data-href="ivanov" style="background: pink;">
            <button>Назад</button>
            <br>Фото Иванова
        </div>
        <div class="member-home" data-href="petrov" style="background: yellow;">
            <button>Назад</button>
            <br>Фото Петрова
        </div>
    </div>
</div>

</body>

</html>


#container {
    position:relative;
    border: 1px solid black;
    width:400px;
    height:600px;
    overflow:hidden
}
#inner {
    position: relative;
    width: 800px;
}
#home {
    position:absolute;
    width: 400px;
    height: 600px;
    background-color: red;
}

.member-home {
    position:absolute;
    left:400px;
    width: 400px;
    height: 600px;
    background-color: green;
    z-index: 1;
}


function toggleDivs(e) {
    var $inner = $("#inner");

    var target = $(e.currentTarget).attr('id')


    // See which divs> should be animated in/out.
    if ($inner.position().left == 0) {
        $('[data-href='+ target +']').css('z-index', 2)
        $inner.animate({
            left: "-400px"
        });

    }
    else {

        $inner.animate({
            left: "0px"
        }, function() {
            $('.member-home').css('z-index', 1)
        });
    }
}

$("button").on("click", function(e) {
    toggleDivs(e);
});