javascript - 如何制作实时的jquery效果？

Question

我想做一个实时提要阅读器，我想要一个解决方案来让新元素在不刷新页面的情况下出现，并且像 friendfeed 一样具有滚动效果。

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

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

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

谢谢

Answer 1

我认为您可能正在寻找比 slideDown() 效果更好的东西。这不太正确，因为它只是增加了对象的高度，而不是让它看起来“滚动”到 View 中。查看 jQuery UI 中的 show() 效果。 http://jqueryui.com/demos/show/#option-effect我想如果你给它垂直滑动的选项，“滑动”效果会很合适。 “Drop”效果听起来应该是对的，但是当我尝试时，我得到了与“slide”相同的效果。也许这是目前演示站点中的错误。

您可能还对使用 animate() 方法为元素的 top 属性设置动画感兴趣，这样您就可以将其“滚动”到 View 中。您需要有一个带有 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) 替换为已知高度的整数值。