jQuery实现列表内容的动态载入特效_jquery

采用Jquery实现的列表数据动态更新效果，更新的数据可以是ajax请求的数据。

CSS:

.main {
 width: 100%;
 margin-top: 100px;
 text-align: center;
 font-size: 12.5px;
}

th, td {
 border: 1px solid #ccc;
 line-height: 40px;
 padding-left: 5px;
}
.item:hover {
 background-color: #efefef;
}
.item:nth-child(2n) {
 background-color: #efefef;
}
.ListView {
 width: 600px;
 overflow: hidden;
 margin: 0 auto;
 padding: 10px;
 height:372px;
 border: 1px solid #dddddd;
}
.ListView .c {
 width: 1200px;
 margin: 0 auto;
 border-collapse: collapse;
}
.Item {
 border-bottom: 1px dashed #dddddd;
 padding: 10px 0 10px 0;
 overflow: hidden;
 margin-left:600px;
}
.Item span {
 float: left;
 text-align: left;
}
.Item span:first-child {
 color: #6AA8E8;
}
.Item span:last-child {
 text-align: center;
}

HTML

 

  

  
 test 男/0 四川省，成都市，锦江区 详细说明 
  
 test 男/0 四川省，成都市，锦江区 详细说明 
  
 test 男/0 四川省，成都市，锦江区 详细说明 
  
 test 男/0 四川省，成都市，锦江区 详细说明 
  
 test 男/0 四川省，成都市，锦江区 详细说明 
  
 test 男/0 四川省，成都市，锦江区 详细说明 
  
 test 男/0 四川省，成都市，锦江区 详细说明 
  
 test 男/0 四川省，成都市，锦江区 详细说明 
  
 test 男/0 四川省，成都市，锦江区 详细说明 
  
 test 男/0 四川省，成都市，锦江区 详细说明 
 
 

刷新数据

JS

"); $(newItem).find("span").css("width",$(".ListView").width()/4+"px"); $(".ListView .c").append(newItem); $(newItem).animate({marginLeft:"0px"},300+i*100); } } }