Tips on the Appand () and prepend () Methods of jquery

A recent job requirement is to ask for a list that automatically scrolls up, with many rows in the table, but one row at a time, and one row per scroll. A very simple function, the code is as follows

<Divclass= "Scroll-area">            <ulclass= "List1">                <Li>                    <spanclass= "Phonenum">111111111</span>                    <spanclass= "Award">101</span>                </Li>                <Li>                    <spanclass= "Phonenum">222222222</span>                    <spanclass= "Award">102</span>                </Li>                <Li>                    <spanclass= "Phonenum">333333333</span>                    <spanclass= "Award">103</span>                </Li>                <Li>                    <spanclass= "Phonenum">444444444</span>                    <spanclass= "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 (' + ', 1)},3000);})

Explanation, each row height of 40px, and then the first Li to jquery variable A, do a whole UL to move 40px animation after the A variable appand to the end of the UL, and then the height of the UL to 0 (this paragraph is not animated)

I thought I would need to remove the first Li, but I would automatically pull the DOM variable or jquery variable from the original position and put it in a new position.

So now that you know this little feature, with the convenience of both Appand and prepend, those automatic Carousel scrolling page effects are much easier.

Perhaps I ignorant, I am also a novice, after all, the first time to find this feature, so down to record

Tips on the Appand () and prepend () Methods of jquery