javascript - 带有动画/过渡的垂直切换的圆形菜单

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");

})