Javascript jquery-如何向下滑动<；李>'；从最后一个开始等等

希望一切顺利，我正在尝试上下列出6个项目

当它下降时，我希望它从最后一个开始到第一个，当它上升时，我只希望整个列表上升

我的列表项如下所示：

<ul>
   <li>Menu item 1</li>
   <li>Menu item 2</li>
   <li>Menu item 3</li>
   <li>Menu item 4</li>
   <li>Menu item 5</li>
   <li>Menu item 6</li>
</ul>

var $sel = $("ul"),
    list = $sel.find('li').get().reverse();
$sel.empty().append(list);

菜单项1
菜单项2
菜单项3
菜单项4
菜单项5
菜单项6

我没有在这里添加任何jquery，因为我真的不知道从哪里开始，我知道如何使它上下滑动，但我不能使它从最后一个滑动到第一个

如果有人能给我指出正确的方向，我会非常感激

---

谢谢。

不确定这是否是你的意思，但你可以像这样翻转列表的顺序：

<ul>
   <li>Menu item 1</li>
   <li>Menu item 2</li>
   <li>Menu item 3</li>
   <li>Menu item 4</li>
   <li>Menu item 5</li>
   <li>Menu item 6</li>
</ul>

var $sel = $("ul"),
    list = $sel.find('li').get().reverse();
$sel.empty().append(list);

html

像这样的

HTML

---

你的问题很模糊。我理解这可能很难解释，但我不知道你所说的“当它下降时，我希望它从最后一个开始到第一个，当它出现时，我只希望整个列表上升”是什么意思。如果任何网站有这种实现，你可以举一些例子给我们看。对不起，这真的很难解释。

<label for="click-me">Click ME</label><input type="checkbox" id="click-me">

<ul>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>Menu item 3</li>
    <li>Menu item 4</li>
    <li>Menu item 5</li>
    <li>Menu item 6</li>
</ul>

ul {
    margin: 3em 0;
}

ul li {
    transition-duration: 800ms;
}

li:nth-child(1) { transform: translateY(-100%); }
li:nth-child(2) { transform: translateY(-200%); }
li:nth-child(3) { transform: translateY(-300%); }
li:nth-child(4) { transform: translateY(-400%); }
li:nth-child(5) { transform: translateY(-500%); }
li:nth-child(6) { transform: translateY(-600%); }


input[type=checkbox]:checked + ul li:nth-child(1) { transition-delay:2000ms; }
input[type=checkbox]:checked + ul li:nth-child(2) { transition-delay:1600ms; }
input[type=checkbox]:checked + ul li:nth-child(3) { transition-delay:1200ms; }
input[type=checkbox]:checked + ul li:nth-child(4) { transition-delay: 800ms; }
input[type=checkbox]:checked + ul li:nth-child(5) { transition-delay: 400ms; }
input[type=checkbox]:checked + ul li:nth-child(6) { transition-delay:   0ms; }


input[type=checkbox]:checked + ul li { transform: none }