Question

我想淡入数据库中的新帖子。我有一个div，其中包含页面加载时加载的所有旧帖子，然后我希望新帖子在旧页面之上淡入。

我刚开始使用jQuery。我尝试了一些事情。

此代码不起作用。（这对你来说很明显。）

$('#oldMessages').html($('#oldMessages').html() + load('newPosts.php').hide().fadeIn(3000));

感谢您的帮助！

Answer 1

我不是100％确定我明白你的意思，但如果你想在新帖子上面“弹出”新数据，你可以尝试这样的事情：

HTML：

...
<div id="new"></div>
<div id="old"></div>
...

JavaScript的：

function loadNewData(url) {
  // prepend contents of 'new' div to 'old' div contents
  $('#old').prepend($('#new').html());

  // reload 'new' div with fresh data from 'url'
  $('#new').load(url).hide().fadeIn(3000);
}

Answer 2

当页面加载时（或需要加载帖子时），试试这个

$.ajax({
    url: 'newPosts.php',
    type: 'GET',
    success: function(data) {
        // assuming data is the html of your posts
        $(data).hide().prependTo($('#oldMessages')).fadeIn(3000);
        // this will fadeIn the entire response
    }
});

修改

这有点苛刻 - 代码有几个要求：

一个元素（如果你愿意，你可以隐藏它），每个帖子都有class="timePosted"
即时后跟一个标记，其中包含class="timeElapsed"经过时间的文本。如果你不能这样做，我认为你需要一个带有一些id的数组来识别每个帖子

由于您还需要更新已用时间，因此您可以在success回调函数中尝试此操作：

$.each($('.timePosted'), function() {
    var diff = new Date() - new Date($(this).val());

    x = diff / 1000
    seconds = x % 60
    x /= 60
    minutes = x % 60
    x /= 60
    hours = x % 24
    x /= 24
    days = x

    if (days >= 1)
        $(this).next('.timeElapsed').html(days + ' days ago');
    else if (hours >= 1)
        $(this).next('.timeElapsed').html(hours + ' hours ago');
    else if (minutes >= 1)
        $(this).next('.timeElapsed').html(minutes + ' minutes ago');
    else if (seconds >= 1)
        $(this).next('.timeElapsed').html(seconds + ' seconds ago');

});

Answer 3

请检查此问题：Using fadein and append

这是类似的事情，解决方案最有可能是您正在寻找的解决方案。

Answer 4

尝试' prepend '：

var new = $('<div id="newMessages" style="display:hidden"></div>').load('newPosts.php');
$('#oldMessages').prepend(new);
$('#newMessages').fadeIn(3000);

抱歉，代码已更新

使用jQuery淡化旧帖子以上的新帖子

4 个答案:

修改