圆形菜单与动画/转换的垂直切换

Question

我想实现一个按钮将从其当前位置移动到顶部的动画，我在这里创建了一个示例，它不完全是我正在寻找的，而是它只是已经淡入/淡出。

这里是JSFiddle的工作例子，我想要展示的是当任何一个圆形导航项被点击时，所有的导航都会从中心顶部移动到顶部，所以用户可以理解当前菜单已经从中心转移到顶部

下面是代码我有尝试至今

编辑：当按下圆形菜单，然后在顶部菜单将出现，循环将隐藏，但它应该这样过渡效果移动中心到顶部。

HTML

<div class="header noDisplay"> 
<div class="logo">&nbsp;</div> 
<div class="nav"> 
    <ul> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
    <li><a href="javascript:;">Button Title</a></li> 
</ul> 
</div> 
</div> 
<div class="selector"> 
<ul> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
    <li> <span><i>Button Title</i></span> </li> 
</ul> 
</div> 

CSS

body{padding:0; margin:0;} 
.selector {position: absolute; left: 50%; top: 50%; width: 450px; height: 450px; margin-top: -225px; margin-left: -225px;} 
.selector ul {position: absolute; list-style: none; padding: 0; margin: 0; top: 50px; right: 50px; bottom: 50px; left: 50px;} 
.selector li {position: absolute; width: 0; height: 100%; margin: 0 50%; -webkit-transform: rotate(-360deg); transition: all 0.8s ease-in-out;} 
.selector li span {position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; line-height: 1px; margin-left: 0; background: #fff; border-radius: 50%; text-align: center; font-size: 1px; overflow: hidden; cursor: pointer; box-shadow: none; transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;} 
.selector li span:hover { background: #fff; } 
.selector.open li span {width: 150px; height: 150px; line-height: 150px; margin-left: -75px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); border:1px solid #b1b1b1; font-size: 14px; 
} 
.noDisplay{display:none;} 
.selector.open li span:hover{background:#fff;} 
.circle-bg{background:#f4f4f4; border-radius:50%;} 
.selector li span > i{display:block; position:absolute; top:0; padding:60px 0 0 0; background:#fff; color:#000; width:100%; font-size:24px; font-weight:bold; line-height:normal; height:100%;} 
.header{float:left; width:100%; padding:5px 0 0 3%; height:75px; box-sizing:border-box; box-shadow:0 0 5px rgba(0, 0, 0, 0.5);} 
.header > .logo{float:left; width:auto;} 
.header > .nav{float:right; width:75%;} 
.header > .nav > ul{list-style:none; margin:0; padding:0; text-align:right;} 
.header > .nav > ul > li{list-style:none; display:inline-block;} 
.header > .nav > ul > li > a {color: #231f1f; display: block; padding: 23px 0; margin:0 15px; font-size: 14px; text-transform: uppercase; text-decoration: none; font-family: Arial; border-bottom:2px solid #fff;} 
.header > .nav > ul > li > a:hover{border-bottom:2px solid #771421; color:#771421;} 

Answer 1

这是你想要的吗？

JSFIDDLE

$(".selector > ul > li > span").click(function(){ 
    $(".logo-onload").fadeOut("slow"); 
    $(".selector").css({"margin-top": "-2000px", "transition": "all 2s ease"}); 
    $(".header").fadeIn("slow"); 

})