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) 
})