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

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