jquery load content via ajax and animate

Question

I am loading in page content via ajax, I am wanting the old content to slide up to the top dissapear, and the new content to follow it into position, my problem is that I cannot seem to get the new content to animate, it just renders on the button click (the old content does however animate). Below is my javascript,

$("#ajax").live("click", function(e){
    var loadURL = $(this).attr('href');
    $("#information").animate{{positionTop : "-900px" }, 1000);
    $(".content").load(loadURL + " #information").animate({positionTop: "0px"}, 1000);
    e.preventDefault();
});

Here is my HTML markup,

<div class="content">
    <div class="loading"></div>
    <article id="information">
        <header>
            <h1 class="beta"></h1>
            <a href="" class="learn">Learn More</a>
        </header>
        <section class="advantage">

        </section>
        <section class="advantage">

        </section>
        <section class="advantage">

        </section>
        <a class="next-advantage" id="ajax" href="/logic-combi.php">Logic+ Combi</a>
    </article>
</div>

The JS is requesting exactly the same setup of HTML, but only from <article id="information">

Tony · Accepted Answer · 2013-11-07 14:31:09Z

2

Perform the animation in the callback of the load function.

$(".content").load(loadURL + " #information", function(){
  $('#information').animate({positionTop: "0px"}, 1000);
});

edited Nov 7, 2013 at 14:31

Tony

12.8k38 gold badges131 silver badges234 bronze badges

answered Jun 26, 2012 at 14:54

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhishek Goel Over a year ago

Perfect. It really helped. :)

Calvein · Accepted Answer · 2012-06-26 14:57:48Z

0

positionTop isn't a valid paramater for animate, you may want to use scrollTop.

answered Jun 26, 2012 at 14:57

Calvein

2,12113 silver badges28 bronze badges

Collectives™ on Stack Overflow

jquery load content via ajax and animate

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related