如何制作一个实时的jQuery效果? [英] How to make a real-time jquery effect?

问题描述

我想要一个实时的提要阅读器，并且我想要一个解决方案，使新的项目出现而无需刷新页面，并具有类似FriendFeed的滚动效果.

i want to make a real-time feed reader, and i want a solution to make the new items coming without refreshing the page and with a scrolling effect like friendfeed.

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

you can see what i'm talking about here: http://www.vimeo.com/4029954

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

I just want a function which i can call with new DIV content and then it create it above the previous DIVs with the effect.

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

Note: i already have the ajax and settimeout functions, means that i have the new feeds content to be added, so what i'm looking for is the effect and function to add new divs with scrolling effect!

谢谢

推荐答案

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

I think you might be looking for something better than the slideDown() effect. That isn't quite right as it just increases the height of an object rather than making it appear to "scroll" into view. Check out the show() effects from jQuery UI. http://jqueryui.com/demos/show/#option-effect I imagine the "Slide" effect would be appropriate if you gave it the option to slide vertically. The "Drop" effect sounds like it would be right, but I get the same effect as "slide" when I try it. Perhaps that is a bug in the demo site at the moment.

您可能还对使用animate()方法设置元素的top属性动画感兴趣，以便可以将其滚动"到视图中.您需要有一个带有overflow: hidden的容器以及一组height和width并具有position: relative的容器.然后，创建一个具有position: absolute的内部容器，然后可以使用jQuery.animate()为该容器的top属性设置动画.

You may also be interested in using the animate() method to animate the top property of an element so that you can 'scroll' it into view. You'd need to have a container with overflow: hidden and a set height and width with position: relative set. Then, an inner container with position: absolute which you can then animate the top property of with jQuery.animate().

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

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

Note that if you know how many pixels tall each inner element would be, you could replace the $items.eq(0).outerHeight(true) with the integer value of the known height.

这篇关于如何制作一个实时的jQuery效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！