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 with many other effects that can be implemented with the GX library, toggling a specified property of an HTML element is usually carried out via its core “gx()” method. However, this type of animation is even simpler to create than the regular kind, as the whole process is reduced to passing the string “toggle” to the method, preceded by the name of the property that needs to be manipulated. That’s all.

To illustrate how to perform an animation like this, below I included a basic example. It will toggle the value assigned to the “width” CSS property of a div when clicking on this element. Take a look at it, please:

<!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 width of the targeted div element

$(document).ready(function(){

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

$('#container').gx({width: '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 width of the targeted 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>

Well, you’ll have to agree with me that understanding how the above code sample functions isn’t rocket science, right? As I said before, the whole toggling process is performed via the handy “gx()” method, which in this case is used for modifying the width of the target div.

In addition to the code snippet that you just saw, here’s a complementary image that schematically represents the previous toggling animation:

So far, so good. Having already demonstrated how easy it is to toggle the width of a simple div via the “toggle” argument, it’s time to explore other possible implementations of this effect. Thus, in the course of the following section I’ll be tweaking the earlier example for toggling the value assigned to the div’s “height” property.

Now, to see how the new example will be developed, click on the link below and read the segment to come.

Next: Dynamically expanding and contracting an HTML element >>