Question

I am getting next page on my wordpress blog using jquery, finding the desired div and appending it to the existing one. This part works without a problem. But, what I need to do is, to add slideDown animation to it.
This is how my working code so far looks like:

$.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();

I tried adding hide() to response, more_div as well as append lines. In the first case, I get error stating that it cannot set property display of undefined.
In the second case, in the console it display HTML and says “has no method hide”. I also tried adding a line $(more_div).hide() but again, I get the error “Uncaught TypeError: Cannot set property ‘display’ of undefined”.
If I use hide in the 3rd line

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

it hides the whole FeaturedRow1 div and animates it, that takes me to the top of the div, which is what I don’t want.

EDIT: Here’s the important HTML structure and jQuery code for the desired section

<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>

When you click on the hyperlink inside the loadmore, the following jQuery code gets called

$('.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

You get error as you are using html method which returns a string not a jQuery object, try the following.

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

Update:

$.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();
});