如何实现实时jquery效果?

我想制作一个实时的源阅读器,我想要一个解决方案,使新项目无需刷新页面,并具有像friendfeed这样的滚动效果。

你可以在这里看到我在说什么: http : //www.vimeo.com/4029954

我只想要一个可以使用新DIV内容调用的函数,然后在上一个DIV之上创建它的效果。

注意:我已经有了ajax和settimeout函数,这意味着我要添加新的feed内容,所以我要找的是添加具有滚动效果的新div的效果和function!

谢谢

我认为你可能正在寻找比slideDown()效果更好的东西。 这不太正确,因为它只是增加了一个对象的高度,而不是让它看起来像“滚动”到视图中。 查看jQuery UI中的show()效果。 http://jqueryui.com/demos/show/#option-effect我想如果你给它选择垂直滑动,“幻灯片”效果是合适的。 “掉落”效果听起来就像是正确的,但是当我尝试它时,我得到与“幻灯片”相同的效果。 也许这是目前演示网站中的一个错误。

您可能还有兴趣使用animate()方法为元素的top属性设置动画,以便您可以将其“滚动”到视图中。 您需要一个容器overflow: hidden ,设置heightwidthposition: relative集。 然后,使用position: absolute的内部容器,然后可以使用jQuery.animate()top属性设置动画。

 var $items = $("#scroller .inner *"); $('#scroller .inner').animate({ top: '-' + Math.round( $items.length * $items.eq(0).outerHeight(true) ) + 'px' }); 

请注意,如果您知道每个内部元素的高度是多少像素,则可以使用已知高度的整数值替换$items.eq(0).outerHeight(true)

如果您想要使用新DIV内容调用的函数,那么我假设您已经执行了AJAX请求。

然后将内容添加到网站:如果您匹配所有条目的容器,那么您将需要http://docs.jquery.com/Manipulation/prepend#content ,如果您匹配第一个条目,您将使用http://docs.jquery.com/Manipulation/before#content 。

如果你想要很好的滑下效果,只需使用……等待它…是的,滑下function:) http://docs.jquery.com/Effects/slideDown

这里有一些技术可以帮助你进一步,但你应该在此后自己做研究:

使用JavaScript setTimeout函数定期调用函数。 然后该函数应该调用jQuery的AJAX函数之一 ,例如$ .load 。