JQuery & AJAX Animation’s

In this article, I’ll show you a bunch of ways to animate text and image’s using JQuery. Like always, I’ll provide snippets of code followed by an explanation on what it does. Let’s start animating.

<title>JQuery Example</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>

Here we start off the HTML code and get the JQuery library for use.

<script type=”text/javascript”>
window.onload = function() {

$(‘#twoButton’).bind(‘click’, showTheImage);


When the page loads I attach all of my event handler’s to the button’s found below. You’ve seen this before in the JQuery & AJAX Event Handler Tutorial. Make sure you don’t forget to add the curly brace followed by a semi-colon, at the end of this code block!

function hideTheImage() {

function showTheImage() {

Here is the could I use to make the logo disappear. The rest of the page will move up and the logo seems to disappear, when I call the function hide(). The value 2500, is the number of millisecond’s I want it to take before the image has completely disappeared.

The function show, will make the image reappear on the screen. The HTML code that places the image on the HTML page, looks like this:

<img src=’http://www.newthinktank.com/favicon.png’ id=’logo’ alt=’Little Brain’ />

function toggleTheText()

The function toggle(), will replace one block of text, with another. Again I’m creating a 2 1/2 second delay, with the value 2500. The HTML code that will be manipulated by toggle looks like this:

<h4><strong>Message 1</strong></h4>
<h4 style=”display: none”><strong>Message 2</strong></h4>

When the button is clicked and toogle(2500) is called, the first <h4> element will be replaced by the one hidden below it. If I click the button again, they change places with each other again.

function fadeTheImage() {

function fadeALittle() {

function fullOpacityImage() {

function unfadeTheImage() {

The fadeOut() function will fade the image away, instead of making it shrink away like the hide() function.

The fadeTo() function will fade to the opacity level that you define with the second attribute you send to it. In this case I’m saying I want the opacity level to be set to 30%. I then call the fadeTo() function again, to make the opacity level 100%.

The fadeIn() function is used to bring an image back after it has been deleted by the fadeOut() function. fadeIn() has no effect on changes made by the fadeTo() function.

function slideTheImage() {

function unslideTheImage() {

These function’s pretty much do what their names say. slideUp() moves all of the content up over top of the element it’s called on. The function slideDown(), slides the element’s back down to make room for the element slideDown() was called on.

function messWithImage() {
width: [‘toggle’, ‘swing’],
height: ‘easeOutBounce’,
opacity: ‘.5’,
marginLeft: “0.75in”,
borderWidth: “12px”,
} ,2500);


Here we are creating a custom animation with the animate() function. Here I’m changing a bunch of css property’s on the fly. You can change the text using any of those property’s defined in css. If you don’t know them, check out my CSS Styling HTML Tutorial.

The rest of the code on the page is straight HTML. If you have any question’s leave them in the comment section below.

I leave you with the remaining code.

Here to Serve

Think Tank

<body id=”theBody”>
<div><h3>Playing with Animation’s</h3></div>

<img src=’http://www.newthinktank.com/favicon.png’ id=’logo’ alt=’Little Brain’ />
<br />

<h4><strong>Message 1</strong></h4>
<h4 style=”display: none”><strong>Message 2</strong></h4>

<p id=”second”>Here today, gone in a click!</p>
<p id=”third”>Waiting for Change</p>

<br />

<form action=””>
<button type=”button” id=”oneButton”>Hide the Logo</button>
<button type=”button” id=”twoButton”>Show the Logo</button>
<button type=”button” id=”fourButton”>Fade the Logo</button>
<button type=”button” id=”eightButton”>Fade a Little</button>
<button type=”button” id=”nineButton”>Full Opacity</button>
<button type=”button” id=”fiveButton”>Unfade the Logo</button>
<button type=”button” id=”threeButton”>Toggle the Text</button>
<button type=”button” id=”sixButton”>Slide away Text</button>
<button type=”button” id=”sevenButton”>Slide Text Back</button>
<button type=”button” id=”tenButton”>Mess with Image</button>


Leave a Reply

Your email address will not be published.