Как сделать эффект jquery в реальном времени?

Question

Я хочу создать программу для чтения каналов в реальном времени и хочу, чтобы новые элементы появлялись без обновления страницы и с эффектом прокрутки, например, Friendfeed.

Вы можете увидеть, о чем я говорю здесь: http://www.vimeo.com/4029954

Мне просто нужна функция, которую я могу вызывать с новым содержимым DIV, а затем она создает ее над предыдущими DIV с эффектом.

Примечание: у меня уже есть функции ajax и settimeout, это означает, что у меня есть новое содержимое каналов для добавления, поэтому я ищу эффект и функцию добавления новых элементов div с эффектом прокрутки!

Спасибо

Answer 1

Я думаю, вы можете искать что-то лучше, чем slideDown() эффект. Это не совсем правильно, поскольку он просто увеличивает высоту объекта, а не заставляет его «прокручиваться» в поле зрения. Проверьте show() эффекты из пользовательского интерфейса jQuery. http://jqueryui.com/demos/show/#option-effect Я думаю, что эффект «Слайд» был бы уместен, если бы вы дали ему возможность скользить по вертикали. Эффект «Drop» звучит так, как будто это будет правильно, но я получаю тот же эффект, что и «slide», когда пытаюсь это сделать. Возможно, в данный момент это ошибка в демо-сайте.

Вам также может быть интересно использовать метод animate() для анимации свойства top элемента, чтобы вы могли «прокрутить» его в поле зрения. Вам понадобится контейнер с overflow: hidden и набором height и width с набором position: relative. Затем внутренний контейнер с position: absolute, который можно затем анимировать свойством top с помощью 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) целочисленным значением известной высоты.

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

Используйте функцию JavaScript setTimeout для регулярного вызова функции. Затем эта функция должна вызывать одну из AJAX-функций jQuery , например $. Load .

Answer 4

Вот некоторые методы, которые могут помочь вам в дальнейшем, но вы должны провести исследование самостоятельно после этого:

• Comet для потоковой передачи данных через постоянное соединение HTTP.Совершенно в режиме реального времени.http://en.wikipedia.org/wiki/Comet_(programming))
• AJAX Polling отправка запроса к HTTP, который также является постоянным соединением, но закрывается после того, как данные присутствуют.Затем вам нужно будет повторно запросить новые данные.http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller