JAVASCRIPT

Manipulating Background Colors with the GX JavaScript Animation Framework

In this second installment of a series, I take a deeper look at a few more features provided by the GX library. Specifically, I show how to use them for performing parallel animations that include changing the width, height and background color of a sample div.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

January 21, 2010

TABLE OF CONTENTS:

In the previous segment, you learned how to perform animations with GX that required changing multiple properties of a single div. However, this concept can be taken one step further and implemented in more creative ways. Suppose, for example, that you need to create an animation that manipulates the initial and final values assigned to the width and background color of the div in question.

You may be wondering how this can be done. Well, thanks to the flexibility of the “gx()” method, the entire animation process would be as simple as coding the following web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Using the GX Animation Library</title>

// change the width and background color of the targeted div element

$(document).ready(function(){

$('#container').click(function(){

$('#container').gx({'width': 600, 'background-color': '#ff8040'}, 1000, 'Linear');

});

</script>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header, #content, #footer {

padding: 30px;

}

#container {

width: 300px;

padding: 10px;

background: #ffffc0;

border: 1px solid #000;

}

</style>

</head>

<body>

<h1>Using the GX Animation Library</h1>

<h2>Header section</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<h2>Click on the div below to change its width and background color</h2>

<p>This container will be animated via the GX animation library. For more information on GX, please click <a href="http://gx.riccardodegni.net/">here</a>.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

Unquestionably, this example is yet another clear demonstration of the capabilities provided by the GX library for performing parallel animations. In this case, the properties changed by the animation process are the width and background color of a single div, but naturally it’s feasible to manipulate different properties with the same ease.

The image included below shows the initial and final states corresponding to the previous animation, which hopefully will help you understand more quickly how it works. Here it is:

So far, so good. Now that you've learned how to use the GX library to change the background color and the width of a div simultaneously, I’d like to finish this tutorial by showing you a final example. It will look similar to the previous one, but this time it’ll change the div’s height.

As usual, this task will require modifying the parameters passed to the already familiar “gx()” method. However, to learn the full details you’ll have to read the lines to come.

Next: Manipulating the background color and height of a div simultaneously >>