javascript - 追加后滚动 LI 不隐藏

Question

我有一个 LI 列表，这些列表通过 javascript/jquery 向上馈送到 View 中。但是，它工作正常，当它将第一个 li 附加到末尾时，它会保持可见。我尝试从我的 javascript 中删除 slideDown() 但它永远不会显示，并且在滚动 10 个元素(可能更多或更少)后它停止了。我的 CSS 仅显示其中的前五个 LI，开始时效果很好。

我怎样才能让 LI 向上滚动，删除第一个并将它隐藏到底部，这样我就可以连续旋转 LI 元素？一旦我让它工作，它将成为一个滚动的新闻提要。

<style>
#news {
    width: 50%;
    margin: 0px;
    pading:0px;
    list-style:none;
    cursor: pointer;
    border: 1px solid red;
    overflow: hidden;
}
#news .item {
    border-width: 1px;
    border-style: solid;
}
#news .item h2 {
    color: white;
    font-size: 100%;
    white-space: nowrap;
    position: relative;
    border-color: inherit;
}
#news .item h2:after {
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent;
    border-left-color: inherit;
    vertical-align: middle;
    position: absolute;
    left: 100%;
}
#news .item h2,
#news .item div {
    display: table-cell;
    vertical-align: middle;
    padding: 0 1.5em;
}
.style1  { border-color: #697791 }
.style1 h2 { background: #697791 }
.style2  { border-color: #74936a }
.style2 h2 { background: #74936a }
.style3  { border-color: #dbbb06 }
.style3 h2 { background: #dbbb06 }
.style4  { border-color: #9C2528 }
.style4 h2 { background: #9C2528 }


#news li:nth-child(n+6) {
    display: none;
}
</style>

<script type="text/javascript">
    var seconds = 2    * 1000;

    function tick2(){
        $('#news li:first').slideUp("slow", function () { $(this).appendTo($('#news')).slideDown("slow"); });
    }
    var timer = setInterval(function(){ tick2 () }, seconds);
    $(document).ready(function() {
        $('#news').hover(function(ev){
            clearInterval(timer);
        }, function(ev){
            timer = setInterval( function(){ tick2() } , seconds);
        });
    });

    </script>

<ul id="news">
   <li><div class="item style1">
        <h2>1</h2>
        <div>
            <p>fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl</p>
        </div>
</div></li>
    <li><div class="item style2">
        <h2>2</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style2">
        <h2>3</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style2">
        <h2>4</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style2">
        <h2>5</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style2">
        <h2>6</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style3">
        <h2>7</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style2">
        <h2>8</h2>
        <div>
            <p>fareveae vasev</p>
        </div>
    </div></li>
    <li><div class="item style4">
        <h2>9</h2>
        <div>
            <p>I'd love them to!!!</p>
        </div>
    </div></li>
    <li><div class="item style3">
        <h2>10</h2>
        <div>
            <p>I love &hearts; testing!!!</p>
        </div>
    </div></li>


</ul>

编辑:我创建了一个 fiddle 来显示 https://jsfiddle.net/0bfuqq7z/ 上发生的事情。

Answer 1

您可以使用 appendTo在 <ul> 中添加元素的函数元素或使用 after在最后一个 <li> 之后添加一个元素的函数元素，正如我在这里展示的那样。我基本上是在末尾添加一个空白列表项，将其隐藏，然后将第一个元素复制到隐藏的最后一个元素，然后对两者执行幻灯片动画，然后删除第一个元素以完成序列。

function tick2(){
    $('#news li:last').after("<li>&nbsp;</li>");
    $('#news li:last').hide();
    $('#news li:last').html($('#news li:first').html());
    $('#news li:first').slideUp("slow", function(){
        $('#news li:first').remove();
    });
    $('#news li:last').slideDown("slow");        
}