如何制作实时jquery效果？

Question

我想做一个实时提要阅读器，我想要一个解决方案，使新的项目不刷新页面，并具有像friendfeed一样的滚动效果。

您可以看到我在这里所说的：http://www.vimeo.com/4029954

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

注意:我已经有了ajax和settimeout函数，这意味着我有要添加的新提要内容，所以我正在寻找的是添加具有滚动效果的新div的效果和函数！

谢谢

Answer 1

我想你可能正在寻找比slideDown()效果更好的东西。这是不太正确的，因为它只是增加了对象的高度，而不是使其看起来像是“滚动”到视图中。查看jQuery UI中的show()效果。http://jqueryui.com/demos/show/#option-effect我想如果你给它一个垂直滑动的选项，“滑动”效果会很合适。"Drop“效果听起来是对的，但是当我尝试它的时候，我得到了和"slide”一样的效果。也许这是目前演示站点中的一个bug。

您可能还会对使用animate()方法为元素的top属性设置动画效果感兴趣，以便可以将其“滚动”到视图中。您需要有一个带有overflow: hidden的容器，以及一个带height集的容器和带position: relative集的width。然后是一个带有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)替换为已知高度的整数值。

Answer 2

因为您想要使用新的DIV内容调用的函数，所以我假设您已经执行了AJAX请求。

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

如果你想要很好的滑落效果，只需使用...等待它..。是的，向下滑动函数:) http://docs.jquery.com/Effects/slideDown

Answer 3

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

用于通过持久超文本传输协议连接流式传输数据的

• Comet。相当实时。http://en.wikipedia.org/wiki/Comet_(programming)
• AJAX轮询向HTTP发送请求，这也是一个持久连接，但在存在数据后关闭。然后您需要重新打开请求以获取新数据。http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller