Question

我使用jquery在我的wordpress博客上获取下一页，找到所需的div并将其附加到现有的div。这部分没有问题。但是，我需要做的是，向其添加slideDown动画。这就是我目前的工作代码的样子：

$.get(next_page, function(data) {
    var response = $(data);
    var more_div = $(response).find('.FeaturedRow1').html();
    $('.FeaturedRow1').append(more_div).slideDown('slow');
    $('.navigation').not(':last').hide();

我尝试将hide（）添加到response，more_div以及追加行。在第一种情况下，我收到错误声明它无法设置undefined的属性显示。在第二种情况下，在控制台中它显示HTML并说“没有方法隐藏”。我也尝试添加一行$（more_div）.hide（）但是再次，我得到错误“未捕获的TypeError：无法设置属性'显示'未定义”。如果我在第3行使用hide

$('.FeaturedRow1').hide().append(more_div).slideDown('slow');

它隐藏了整个FeaturedRow1 div并为其设置了动画，它将我带到div的顶部，这是我不想要的。

编辑：这是所需部分的重要HTML结构和jQuery代码

<div class="FeaturedRow1">
  <div class="postspage">
    //list of posts here
  </div>
  <div class="navigation">
    <span class="loadless">
      //hyperlink to previous page
    </span>
    <span class="loadmore">
      //hyperlink to next page
    </span>
  </div>
</div>

当你点击loadmore里面的超链接时，会调用以下jQuery代码

$('.loadmore a').live('click', function(e) {
    e.preventDefault();
    var next_page = $(this).attr('href');
    $.get(next_page, function(data) {
        var $response = $(data);
        var $more_div = $response.find('.FeaturedRow1').hide();
        $more_div.appendTo('.FeaturedRow1').delay(100).slideDown('slow')
        $('.navigation').not(':last').hide();
    });
});
$('.loadless').live('click', function(e) {
    e.preventDefault();
    if ($('.postpage').length != 1) {
        $('.postpage').last().remove();
    } 
    $('.navigation').last().remove();
    $('.navigation').last().show();
});

Answer 1

当您使用html方法返回字符串而不是jQuery对象时，会出现错误，请尝试以下操作。

var $response = $(data);
var $more_div = $response.find('.FeaturedRow1').hide();
$more_div.appendTo('.FeaturedRow1').delay(100).slideDown('slow');
//$('.navigation').not(':last').hide();

更新

$.get(next_page, function(data) {
    var $response = $(data);
    var more_div = $response.find('.FeaturedRow1').html();
    $('<div/>').hide()
               .append(more_div)
               .appendTo('.FeaturedRow1')
               .delay(100)
               .slideDown('slow')
    $('.navigation').not(':last').hide();
});

jQuery：通过ajax获取下一页并附加动画

1 个答案: