在公司做项目的时候，始终不了解信息逐条向上滚的动画效果，后来查阅相关资料，终于明白了，在这个过程中，让我对appendTo这个函数有了一个全新的认识。话不多说，首先是demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin:0;
padding: 0;
}
.main{
width:400px;
height:60px;
margin:50px auto;
border:1px solid black;
overflow:hidden;
}
.main p{
height:60px;
line-height:60px;
text-align:center;
color:black;
}
.main .box{
width: 100%;
height: 100%;
}
</style>
<body>
<div class="main">
<div class="box"></div>
</div>
</body>
<script src="lib/jquery/jquery.min.js"></script>
<script>
$(function(){
data=['//cdn.bootcss.com/jquery/3.0.0/core.js',
'//cdn.bootcss.com/jquery/3.0.0/jquery.js',
'//cdn.bootcss.com/jquery/3.0.0/jquery.min.js',
'//cdn.bootcss.com/jquery/3.0.0/jquery.slim.min.js',
'//cdn.bootcss.com/jquery/3.0.0/jquery.slim.js'
];
dataUp();
function dataUp(){
for(var i=0;i<data.length;i++){
$('.box').append('<p>'+data[i]+'</p>');
}
}
function runDrawBanner(){
setInterval(function(){
$('.box').animate({'marginTop':'-60px'},2000,function(){
var _self = $(this);
_self.find('p').eq(0).appendTo(_self);
console.log(_self.find('p').eq(0).text());
_self.css({'marginTop':'0'});
});
},2000);
}
runDrawBanner();
}) </script>
</html>
这只是一个简单的demo，可以通过这个实现信息向上翻滚的动画。其中appendTo()的效果可以用下面这个DEMO看到具体的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>這是一個內容1</li>
<li>這是一個內容2</li>
<li>這是一個內容3</li>
<li>這是一個內容4</li>
<li>這是一個內容5</li>
</ul>
</body>
<script src="lib/jquery/jquery.min.js"></script>
<script>
$(function(){
function date(){
$('ul').find('li').eq(0).appendTo('ul');
}
setInterval(date,1000);
})
</script>
</html>
抱歉，不会解释，具体情况看效果