JAVASCRIPT

Toggling CSS Properties with the GX JavaScript Animation Framework

In this ninth episode of the series, I provide you with some comprehensive examples that show how to toggle different properties of a sample div by using the core “gx()” method of the GX library. As with many tasks the GX JavaScript animation framework can be made to perform, toggling animations is a very simple process.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

February 09, 2010

TABLE OF CONTENTS:

As I expressed in the earlier segment, I’d like to finish this tutorial by showing you how to create a basic example that will toggle the opacity of a div. As you may have guessed, achieving this requires only the passing of the “toggle” argument to the “gx()” method, and the source code corresponding to the example is as follows:

<!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>

// toggle the opacity of the targeted div element

$(document).ready(function(){

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

$('#container').gx({opacity: 'toggle'})

});

</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>Toggling the opacity of the targeted div element</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>

Obviously, toggling the opacity of an HTML element (in this case, a simple div) is nearly identical to alternating the values assigned to its width and height properties respectively, which means that you shouldn’t have major problems understanding how the above example does its thing. Even so, the following diagram should help to dissipate any doubts that you might have on this topic. Check it out:

Done. With all of the code samples shown in this tutorial under your belt, you’ll be able to create animations that toggle different properties of multiple web page elements. As the old proverb says, practice makes perfect, so start practicing with the GX library right now!

Final thoughts

Over this ninth episode of the series, I provided you with some comprehensive examples that showed how to toggle different properties of a sample div, as usual via the core “gx()” method of the GX library. As you saw for yourself, performing toggling animations is a very simple process, which implies that you shouldn’t have major difficulties implementing this type of effect on your own web pages.

But wait a minute! Do you remember that in previous tutorials I mentioned that GX also included a set of additional methods, which could be used for creating common effects, such as fade-ins/outs, slides and movements? Well, in the next chapter I’ll be taking a closer look at these convenient methods.

Here’s my advice: don’t miss the article to come!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.