<div id="container">
<div id="header">
<h1>Your title</h1>
</div>
<div id="content">
<div id="active-content">
Current content goes here. <a href="#" onclick="return slideMe()">Slide new content</a>
</div>
<div id="ajax-content"></div>
</div>
<div id="footer">
This sample code is associated to the <a href="https://www.endyourif.com/transitioning-ajax-content-into-view-with-jquery-animate/">Transitioning AJAX Content into view with jQuery $.animate()</a>
</div>
</div>function slideMe() {
$('#ajax-content').load('index2', function() {
$("#ajax-content").css("position", "absolute");
$("#ajax-content").css("right", "20px");
$("#ajax-content").animate({ left: 0 }, 1000, 'linear', function() {
// swap the content
$("#active-content").html($("#ajax-content").html());
$("#ajax-content").html("");
$("#ajax-content").css("position", "relative");
});
});
return false;
}
External CSS
This Pen doesn't use any external CSS resources.