如何使用jQuery反向浏览列表

Question

我有以下页面，该页面使用css和jQuery对列表元素进行动画处理。它从第一个（顶部）开始，并循环遍历每个事件，直到全部显示出来。它使用CSS使元素可见。

我想要执行的操作使其从列表的底部而不是顶部开始，因此首先显示最后一个元素，然后显示最后一个元素。从本质上颠倒了现在的顺序。

我知道这应该很简单，但是我正在努力弄清楚。我认为逻辑必须在脚本标签的循环中完成

<ul class="list">
    <li>
        <h1>Position 1</h1>
        <p>Lorem Ipsum</p>
    </li>
    <li>
        <h1>Position 2</h1>
        <p>Lorem Ipsum</p>
    </li>
    <li>
        <h1>Position 3</h1>
        <p>Lorem Ipsum</p>
    </li>
    <li>
        <h1>Position 4</h1>
        <p>Lorem Ipsum</p>
    </li>
    <li>
        <h1>Position 5</h1>
        <p>Lorem Ipsum</p>
    </li>
</ul>
<style>

@import url('https://fonts.googleapis.com/css?family=Roboto');

.list{
    margin:3em auto;
    list-style: none;
    padding: 0;
 }

.list li{
    visibility: hidden;
    margin-left: 0;
    padding-left: 72px;
    padding-right: 16px;
    padding-bottom: 16px;
    padding-top: 16px;
    position: relative;
}

@keyframes slideInLeft {
    from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
    }

    to {
    transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    animation-name: slideInLeft;
    animation-duration: 250ms; 
    visibility: visible !important;
}

</style>
<script>
(function(){
'use strict'

    var items = document.getElementsByTagName('li')

    function doSetTimeout(i) {
      //console.log(items)
      var t = items[i]
        setTimeout(function(){ 
            t.className = 'slideInLeft'; 
        }, (i+1) * 1150);
    }

    for (var i = 0; i < items.length; ++i)
      doSetTimeout(i);

})()
</script>

任何建议，将不胜感激，

谢谢

Answer 1

您当前正在使用以下命令遍历items的列表：

for (var i = 0; i < items.length; ++i)

您可以执行以下操作以相反的方式进行迭代：

for (var i = items.length-1; i >= 0; i--)