与最近的饲料

Question

我在这三个网站采取一看滚动下拉框：

www.foursquare.com www.untappd.com www.getglue.com

，你可以看到主界面有向下滚动最近的活动框。 我该如何创建类似的东西？

这是jQuery或什么？

Answer 1

它完成与JavaScript，你可以使用jQuery来使自己更容易。下面有一个简单的例子

http://jsfiddle.net/tpmQj/

$(function(){ 
    setInterval(function(){ 
        $("#wrapper").prepend($("<li>A new item</li>").hide().fadeIn()); 
    }, 4000); 
}); 

你可以使用一个超时或间隔，再加上一个Ajax请求，该民意调查数据库，并返回新的结果等基本概念只是追加新项目到dom树。

Answer 2

除了Loktar的版本，这更类似于4square：http://www.jsfiddle.net/8ND53/

var newitem = function(){ 
    var item = $('<div>') 
     .addClass('item') 
     .css('display','none') 
     .text('This is a brand new item') 
     .prependTo('#scroller') 
     .slideDown(); 
    $('#scroller .item:last').animate({height:'0px'},function(){ 
     $(this).remove(); 
    }); 
} 

setInterval(newitem, 2000);