Ruby on Rails javascript action response (js.erb) is rendering new partial, but not performing ui effects

Question

Context:

I have two models, model1 and model2. Model1 has_many model2's. In the model1's manage page, I render a list of _model2.html.erb files, one for each model2 associated with model1. In order for the user to create a new model2 from the model1 manage page, I created a create.js.erb file under the model2's view directory. The file currently looks like this:

$('#back').hide();
$('#allTab').removeClass('active');
$('#activeTab').addClass('active');
$('#completeTab').removeClass('active');
$('html,body').animate({
    scrollTop: $('html,body').scrollHeight
}, {
    duration: 600,
    queue: false
});
$('#activeTabList').closest('.number_of_model2s').text("<%= @model1.model2s.count %>");
$('#activeTabList').append("<li><%= escape_javascript(render partial: 'model2s/model2', locals: {f: @model2, g: @model1}) %></li>");
$('#activeTabList').last().children().effect('highlight', {}, 3000);

Problem:

I had to create a definition for @model1 in the create method of the model2 controller to make the rendering of the partial work. But I can't get any of the animation or highlighting in. This list can get long, and that's why I want to scroll to the bottom of the page. I want the user to see the addition to the list. The highlighting isn't too important, but I'm trying to get it to work, because I also have an update action working in a similar fashion, and I would like to highlight the partial that gets updated (I remove the partial that was there and then I request the same model2's partial again in that same place).

Question:

Is there a particular reason why the only line of code that seems to execute is the render partial line?

More Information:

The partial is not even rendered if I replace the partial render line above with

$('#activeTabList').append("<li id='model2_<%= @model2.id %>'><%= escape_javascript(render partial: 'model2s/model2', locals: {f: @model2, g: @model1}) %></li>");

In the manage page html, I specify the list items' id's in this way, but the partial does not render if I add the id here. Does this seem to be connected with the issue I'm having?

Answer 1

I got it to scroll finally. @gg_s, your answer helped with the syntax of my animate scroll method, and then I had to fix it to work with mozilla. Here is what worked for me:

var $new_campaign_li = $('#activeTabList').children('li').last();
$(jQuery.browser.webkit ? 'body': 'html').animate({
    scrollTop: $new_model2_li.offset().top + $new_model2_li.children().height() / 2 - $(window).height() / 2
}, {
    duration: 600,
    queue: true
});// This delay doesn't seem to work: .delay(1000);
$new_model2_li.children().effect('highlight', {color: '#71EC5E'}, 1500);

The highlight effect was fixed with a silly mistake in traversing. But I did notice that whether queue is set to true or false, and even if I use delay(1000), these two animations run at the same time. It works the way I want it to though! Thanks!