As a user of the Internet, I enjoy slick looking features that help make my experience look cool and seem fast or seamless. A nice trick to include this type of functionality is to perform a transition of new content using jQuery's $.animate() function.
Before starting, I must profess that I am not a designer, so don't expect this to be pretty – just functional! Once you have the basic functionality down, it can be prettied up quickly. The purpose of this process is to have a container with the current content a user is viewing. Just to the right of this content should be another container (just a hint of it anyways) that the new content will be loaded into. Once the AJAX request completes, the content will be embedded into the right container. Once embedded, this container will be transitioned into view and the content will be swapped. Again, I'll leave the CSS with you, but the basic HTML goes as follows: The basics to this HTML is that there is a container called content. This will be the outer container. Inside of here are two div tags. The first, active-content, is what will house the currently viewed content. The second div, ajax-content, should be empty – unless you wish to include some "sneak peek". Next the, jQuery code needs to be included. This should be placed above the end body tag. In the first code example, I have placed a basic link that performs an onclick event to a Javascript function called slideMe. This is the function in the above example and does several important things. Firstly, it performs an AJAX call using jQuery's $.load() function that will automatically append the results of the AJAX call to the element specified, in this case, an element with an id of ajax-content. Once the AJAX request is completed, the fun begins. The ajax-content div is converted to an absolute positioned div, so it can be animated from right-to-left. Because it is absolutely positioned, the right property is set to 20px – so that it stays in the same spot. Now it is time to run the $.animate() function. The animation is applied to the ajax-content div to animate the div to the left property of 0 in a linear fashion over a one second period (1,000 milliseconds). Finally, when the animation is complete, I swap the ajax-content into the active-content. The ajax-content content is then reset to nothing and its position property is changed back to relative so it will return back to the right of the current content. Here is a basic example of this process. Once you add some design flare to this example, you can begin making your content look like it is pre-loaded an animate it in place through AJAX and jQuery's $.animate() function. Published on Feb 28, 2019 Tags: AJAX
| JavaScript
| jQuery Tutorial
Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article
that you just finished reading.
Jamie Munro is the author of ASP.NET MVC 5 with Bootstrap and Knockout.js,
Knockout.js: Building Dynamic Client-Side Web Applications,
20 Recipes for Programming MVC 3,
and 20 Recipes for Programming PhoneGap. He has been developing websites and web applications for over 20 years. Jamie began his writing career in 2009. As the success of Jamie's blog grew, he turned his writing passion to books about web development in hopes that his many years of experience could be passed on to his readers. No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner
or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in
and improve your skillset with any of the tutorials below.
HTML to setup for jQuery's $.animate() function
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your title</title>
</head>
<body>
<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">
Copyright you
</div>
</div>
</body>
</html>
Implementing jQuery's $.animate()
<!-- include the code from above -->
<script type="text/javascript">
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;
}
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
</body>
</html>
Example of jQuery's $.animate()
Related Posts
Tutorials
Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.