HTML网页菜单的动画

Question

HTML：

<div id="menu" class="menu"> 
     <ul class="headlines"> 
      <li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li> 
      <li id="item2"><button onclick="myFunction2()">A </button></li> 
      <li id="item3">B  </li> 
      <li id="item4">C  </li> 
      <li id="item5">D  </li> 
      <li id="item6">E  </li> 
      <li id="item7">F  </li> 
     </ul> 
     </div> 

CSS：

lu, li{ 
    list-style-type: none; 
    font-size: 1.5em; 
    height: 40px; 
    width: 150px; 
    text-align: right;  
    border-style: none; 
} 

.menu{ 

    width:150px; 
    height: 350px; 
    margin:0 auto; 

} 



.menu li{ 
position: relative; 
    top:150px; 
    bottom: 0; 
    right: 0; 
    margin: auto; 
    border-style:none; 
} 

我想动画这个菜单这是在我的网站的正中，要到最终的左侧以这种形式/，点击其中的一个元素。任何帮助？

Answer 1

这是一个JQuery的快速位置，它将点击左边的li;

$(".headlines li").click(function() { 
    $(this).animate({left: '-300px'}, 600) 
}) 

编辑

要点击一个链接创建下面的CSS，正常的菜单CSS下面的时候把所有的人，

.menuclicked{ 
    position: relative; 
    width:150px; 
    height: 350px; 
    left: -300px; 
    transition: all 1s; 
} 

然后使用这个jQuery;

$(".headlines li").click(function() { 
    $(".menu").addClass("menuclicked"); 
}) 

EDIT 2（增加延迟）

为了让他们去一次一个美国动画之间的.delay错开它们。

$(".headlines li").click(function() { 
      $("#item1").animate({left: '-300px'}, 600) 
      $("#item2").delay(100).animate({left: '-300px'}, 600) 
      $("#item3").delay(200).animate({left: '-300px'}, 600) 
      $("#item4").delay(300).animate({left: '-300px'}, 600) 
      $("#item5").delay(400).animate({left: '-300px'}, 600) 
      $("#item6").delay(500).animate({left: '-300px'}, 600) 
      $("#item7").delay(600).animate({left: '-300px'}, 600) 
})