Tips on jQuery's appand () and prepend () methods, jqueryappand

Tips on jQuery's appand () and prepend () methods, jqueryappand

Recently, a requirement is that a list is automatically rolled up. The table has many rows, but only one row is displayed and one row is rolled each time. The Code is as follows:

<div class="scroll-area">            <ul class="list1">                <li>                    <span class="phoneNum">111111111</span>                    <span class="award">101</span>                </li>                <li>                    <span class="phoneNum">222222222</span>                    <span class="award">102</span>                </li>                <li>                    <span class="phoneNum">333333333</span>                    <span class="award">103</span>                </li>                <li>                    <span class="phoneNum">444444444</span>                    <span class="award">104</span>                </li>            </ul>        </div>

.scroll-area {    height:40px;    overflow:hidden;    background-color:#fff4d7;    width:88%;    margin:0 auto;    border-radius:99px;}.scroll-area>ul {    margin:0;    padding:0;    font-size:15px;    color:#9b520b;    position:relative;    top:-40px;}.scroll-area>ul>li {    padding:9px 18px;}.scroll-area>ul>li>span {    vertical-align:sub;}.scroll-area>ul>li .award {    float:right;}

function Scroll(height,num){    var a = $('.scroll-area>ul>li').slice(0,num);    $('.scroll-area>ul').animate({top:-height*num},1000,function(){$('.scroll-area>ul').append(a).css('top','0');});}$(document).ready(function(){    var interval = setInterval(function(){Scroll('40',1)},3000);})

In this example, the height of each row is 40px, and then the first li is converted to jquery variable a. After the ul is scaled up to 40px, the variable is appended to the end of ul, then convert ul's height to 0 (This section is not an animation)

I thought I still needed to delete the first li, but in fact it would automatically remove the dom variable or jQuery variable from the original location and put it in the new location.

Now that we understand this small feature and use the appand and prepend methods for convenience, it is much more convenient for those page effects that automatically rotate and scroll.

I am a newbie. After all, I found this feature for the first time.