Javascript HTML网站菜单动画

HTML:

---

<>我想激活这个在我的网站中间的菜单，当它点击其中的一个元素时，进入这个表格的最终左边。有什么帮助吗？

这里是一个快速的Jquery，它将显示单击左侧的li

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

编辑

要在单击链接时移动所有CSS，请在下面创建CSS，在常规菜单CSS下面

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

然后使用这个JQuery

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

编辑2（添加延迟）

为了让它们一次一个地移动，我们需要在动画之间延迟以使它们错开

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

---

你在挣扎什么？到目前为止，您尝试了什么？您有两个选项：（A）css3动画/转换（B）javascript（如果您对javascript和跨浏览器支持内容比较陌生，请尝试jQuery）我尝试了转换，但是菜单静止不动，没有移到左边

边距：0自动在这里是个问题。如果设置
左边距：300px对于测试和动画，这应该可以工作。但由于没有设置特定的px值，因此无法设置动画。我的第一个解决方案是使用javascript检测当前浏览器计算的左边距，并专门将其设置为该值。然后像你以前那样做动画。看起来不太优雅。。。有人想知道更好的主意吗？但是，这不会影响调整浏览器窗口大小时菜单的响应吗？这是我想要的，是的，这是功能的一部分，但在选择任何元素时，所有元素都必须在三角形/窗体的这一侧向左移动，并且在到达最终左侧时，采取原始形式|@randy哦，你想让他们一次移动一个吗？@randy这是基于matthew的原始形式answer@Dom-TaphillStudios谢谢，我永远也弄不明白为什么它在JSFIDLE中不起作用，结果我使用的是默认的pureJS谢谢，我今天学到了一些新东西
$(".headlines li").click(function () {
   $(".menu").addClass("menuclicked");
})

$(".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)
})