如何实现实时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
,设置height
和width
与position: 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
这里有一些技术可以帮助你进一步,但你应该在此后自己做研究:
- Comet用于通过持久HTTP连接传输数据。 非常实时。 http://en.wikipedia.org/wiki/Comet_(programming) )
- AJAX轮询向HTTP发送请求,HTTP也是持久连接,但在数据出现后关闭。 然后,您需要重新打开新数据的请求。 http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller
使用JavaScript setTimeout函数定期调用函数。 然后该函数应该调用jQuery的AJAX函数之一 ,例如$ .load 。