Question

我正在尝试构建一个自动流，它会自动将最新的条目显示到数据库表中，每次输入新行时都会更新。

目前它的工作方式是使用Prototype的Ajax.PeriodicalUpdater不断检查新条目，然后将其显示给用户，但它是跳跃的。

我希望使用jQuery的.slidedown动画从数据库幻灯片中找到任何新条目。

这就是我现在拥有的东西

在包含活动流的页面上：

<div id="activity"></div>

和javascript：

Event.observe(window, 'load', function() {  
updater('activity', 'activities.php');
});

function updater(element_id, element_page)
{
  new Ajax.PeriodicalUpdater(element_id, element_page, {
   method: 'get', 
   frequency: 1, 
   decay: 2
  });
}

activities.php：

foreach($activities as $activity)
{
  // get time since created
  $created = strtotime($activity['Activity']['created']);
  $time_since = $this->Time->timeAgoInWords($created);
  ?>
   <div id="activity_item">
     <span id="type"><?php echo $activity['Activity']['type']?></span>
     <span id="created"><?php echo $time_since ?></span><br />
     <span id="event"><?php echo $activity['Activity']['event']?></span>
    </div>
  <?php
 }

关于如何合并滑动动画的任何想法？或者我完全以错误的方式做这件事？

Answer 1

使用jQuery期刊更新程序插件可能会更好运，可在此处找到：https://github.com/RobertFischer/JQuery-PeriodicalUpdater/

例如，这将从/path/to/get/request进行轮询，并在标识为#feed的块顶部添加一个新条目（最大长度为5个项目）。

$.PeriodicalUpdater('/path/to/get/request', 
  {method: 'get', data: '', minTimeout: 10000, maxTimeout: 32000,
   multiplier: 2, type: 'json', maxCalls: 0, autoStop: 0},
 function(d, success, xhr, handle) { 
    $("#feed").prepend('<h3>'+d.something+'</h3>');
    $("#feed").children().first().css("display", "none");
    if ($("#feed").children().length > 5) {
        $("#feed").children().last().remove();
    }
    $("#feed").children().first().addClass("first")
        .next().removeClass("first");
    $("#feed").children().first().slideDown(200);
});

如何在原型的.PeriodicalUpdater中使用jQuery的.slidedown

1 个答案: