jQuery-如何向下滑動 <li> 從最后一個開始，依此類推

Question

希望一切都好，我正在嘗試上下動畫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>

我沒有在此處添加任何jquery，因為我真的不知道從哪里開始，我知道如何使其上下滑動，但是我無法使其從最后到第一開始向下滑動。

如果有人能指出正確的方向，我將不勝感激。

謝謝。

Answer 1

像這樣嗎

http://jsfiddle.net/ej5x29q7/4/

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>

JavaScript的

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 }

Answer 2

不確定這是否是您的意思，但是您可以像這樣翻轉列表的順序：

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

Answer 3

演示

HTML

<h1> Click on list </h1>

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

JS

$("li").click(function () {
    var prev = $(this).prevAll();
    $.unique(prev).each(function (i) {
        $(this).slideUp(function () {
            $(this).appendTo(this.parentNode).slideDown();
        });
    });
});