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

<强> Demo

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

jquery - 如何从最后一个<li>开始向下滑动<li>。</li>

3 个答案: