关于jQuery的append()和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:;

    padding:;

    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变量append到ul的末尾，再把ul的高度重制为0（这段不是动画）

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

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

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