javascript - 2 个翻转部分的动画侧边菜单

Question

我有以下代码，想知道是否有可能将菜单列表分成两个翻转部分，就像我们在这个 example 中所做的那样由 next 和 previous 按钮激活。

我一直在努力弄清楚 pagination 代码部分是如何工作的，但不幸的是，我还不够好，无法适应现有代码段并取得好的结果。

如果有您的代码解决方案和想法，我将不胜感激。谢谢

<div class="pagination" id="pagination"><a href="javascript:void(0)" onclick="changePage(2,19, true)" class="next_page">Next page</a>&nbsp;<span>(1 of 2)</span></div>

body {
    font: normal 1.0em Arial, sans-serif;
    background: #A8CBFF;
}

nav {
    font-size: 3.0em;
    line-height: 1.0em;
    color: white;
    
    width:6em;
    height: 9.0em;

    position:absolute;
    top:0; bottom:0;
    margin:auto;
    left: -4.5em;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    background-color: blue;
    height: 1.0em;
    padding: 0.25em;
    position: relative;

    border-top-right-radius: 0.75em;
    border-bottom-right-radius: 0.75em;

    -webkit-transition: -webkit-transform 500ms, background-color 500ms, color 500ms;
    transition: transform 500ms, background-color 500ms, color 500ms;
}

nav ul li:nth-child(1) { background-color: #00aced;}
nav ul li:nth-child(2) { background-color: #3b5998;}
nav ul li:nth-child(3) { background-color: #517fa4;}
nav ul li:nth-child(4) { background-color: #007bb6;}
nav ul li:nth-child(5) { background-color: #cb2027;}
nav ul li:nth-child(6) { background-color: #ea4c89;}

nav ul li:hover {
    background-color: #C1232D;
    -webkit-transform: translateX(4.5em);
    transform: translateX(4.5em);
}

nav ul li span {
    display:block;
    font-family: Arial;
    position: absolute;
    font-size:1em;
    line-height: 1.25em;
    height:1.0em;
    top:0; bottom:0;
    margin:auto;
    right: 0.16666666666667em;
    color: #F8F6FF;
}

a {
    color: #FFF;
    text-decoration: none;
}

<nav>
  <ul>
    <li><a href="http://www.twitter.com">Category 1</a></li>
    <li><a href="http://www.facebook.com">Category 2</a></li>
    <li><a href="http://www.instagram.com">Category 3</a></li>
    <li><a href="http://www.instagram.com">Category 4</a></li>
    <li><a href="http://www.instagram.com">Category 5</a></li>
    <li><a href="http://www.instagram.com">Category 6</a></li>
  </ul>
</nav>

Answer 1

试试这个

/* Bootstrap minified JavaScript included as External Resource */
$(document).ready(function(){
    $('#page2').hide();
    $('#paginate_pre').hide();
    
    $('#paginate_next').on('click', function(){
        $('#page1').hide();
        $('#page2').show();        
        $('#paginate_next').hide();
        $('#paginate_pre').show();
    });
        
    $('#paginate_pre').on('click', function(){
        $('#page2').hide();
        $('#page1').show();
        $('#paginate_pre').hide();
        $('#paginate_next').show();        
    });
});

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<nav id="page1">
  <ul>
    <li><a href="http://www.twitter.com">Category 1</a></li>
    <li><a href="http://www.facebook.com">Category 2</a></li>
    <li><a href="http://www.instagram.com">Category 3</a></li>
    <li><a href="http://www.instagram.com">Category 4</a></li>
    <li><a href="http://www.instagram.com">Category 5</a></li>
    <li><a href="http://www.instagram.com">Category 6</a></li>
  </ul>
</nav>
<nav id="page2">
  <ul>
    <li><a href="http://www.twitter.com">Category 7</a></li>
    <li><a href="http://www.facebook.com">Category 8</a></li>
    <li><a href="http://www.instagram.com">Category 9</a></li>
    <li><a href="http://www.instagram.com">Category 10</a></li>
    <li><a href="http://www.instagram.com">Category 11</a></li>
    <li><a href="http://www.instagram.com">Category 12</a></li>
  </ul>
</nav>
<div ><a href="#" id="paginate_next">NEXT</a></div>
<div ><a href="#" id="paginate_pre">PREV</a></div>

fiddle :http://jsfiddle.net/anandgh/ozuzgdnt/