关于jQuery的appand()和prepend()方法的小技巧

最近工作上有个需求是要求一个自动向上滚动的列表，表有很多行，但只显示一行，每次滚动一行。很简单的一个功能，代码如下

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

解释下，每一行高度40px，然后把第一个li转为jquery变量a，做一个ul整体上移40px的动画后再把a变量appand到ul的末尾，再把ul的高度重制为0（这段不是动画）

原本以为还需要再把第一个li删除的，但是其实会自动将dom变量或者jQuery变量从原来的位置抽离，放到新的位置

那么既然了解了这个小特性，利用appand和prepend这两个方法的便利，那些自动轮播滚动的页面特效就方便多了。

也许是我孤陋寡闻了，我也是新手，毕竟第一次发现这个特性，所以下来记录下

原标题：关于jQuery的appand()和prepend()方法的小技巧

关键词：jquery