How to Create Amazing Page Effects with jQuery UI


By

If you’re familiar with developing JavaScript, then you must know about jQuery. It’s an extremely powerful library that allows you to write much simpler code and express the same result. This trend has split off into a few sister projects, one of which being the jQuery UI Library.

This script allows developers to quickly animate with precision using custom functions. You can also include themeable page widgets such as tabs and image uploaders. For this article, I want to look into some of the custom animation effects you can utilize. These provide sweet eye candy for your page layout and fit into any design.

Getting Started

The jQuery UI Library offers a whole lot of predefined widgets and user interactions(draggable, sortable, etc.). But when discussing just animations, there is a huge list of effects to choose from. And many of these custom effects can be used with standard jQuery functions.

To get started, we need a plain HTML document and the inclusion of both the jQuery and jQuery UI scripts. All user interface animations and widgets require the original jQuery code to function properly. Below is an example you can use for any basic jQuery UI template:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Testing</title>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
</head>

The simplest setup for calling jQuery animations is through the Effect method. You can pass in any series of effects along with a callback to reposition, remove, hide, or just animate any objects on the page. This one method can give you immense control over the website’s dynamic content.

Animating the Basics

To use a small example, I’ve created a div with the ID “box” and an anchor link with the ID “button.” We can animate a few different effects on this box just to see how it would affect any typical page element.

<body>
<div id="box">
	<h2>Some text here</h2>
</div>

<a href="#" id="button">Do Some Effects!</a>
</body>

I’m going to open a new script tag right before the closing body tag, and here we can write some new jQuery code. This basic demonstration should be easy enough to customize and come back to as a reference guide.

I’ll start by writing a simple function doEffect(), which can be called from any point. You can trigger this after a link clicks, as we will do here, or after the user opens a menu or hovers over a block. The trigger commands are practically limitless!

$(function() {
	function doEffect() {
	  // pre-determined values for myEffect:
	  // blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size, slide, transfer
	  var myEffect = "fold";
	  var options = {};
		
	  if (myEffect == "scale") { options = { percent: 0 }; }
	  if (myEffect == "transfer") { options = { to: "#button", className: "ui-effects-transfer" }; }
	  if (myEffect == "size") { options = { to: { width: 200, height: 60 } }; }
	
	  $("#box").effect(myEffect, options, 450, callbackMethod );
	};

The variable named myEffect can be changed to any of the values I’ve commented on above. These are preset by jQuery UI and allow you much greater control. Some of the effects require default settings inside an option{} variable – this is why I’ve used three logic statements right before the effect() method.

Using Purposeful Effects

Remember that JavaScript is still not something fully supported in all mobile browsers and tablets. It can provide entertaining effects for all standards-compliant web browsers. But make sure you aren’t going overboard with too many animations.

Now let’s finish up the small example from above by looking at the trigger code. This is possibly the most important piece you need to consider for building page effects. When will your effect be displayed? What does your visitor need to do, and how do you make the animation feel natural?

function callbackMethod() {
		setTimeout(function() {
			$( "#box" ).removeAttr( "style" ).hide().fadeIn();
		}, 500 );
	}
	
	
	$( "#button" ).click(function() {
		doEffect();
		return false;
	});
});

My function callbackMethod() is used in this example to re-display the box after animating. The effect method will toggle an element visible or invisible or setup a different class. You don’t need to have this callback method for your code – in fact, you could leave it totally empty!

For the last bit, we are calling an event handler whenever the user clicks our button link. This runs the doEffect() function, and we can experience our animation unfold! Trying to think of good examples for this functionality can be tough. Dropdown navigation links, e-mail signup forms, or maybe even animating a hidden toolbar at the top/bottom of your page.

Animations and Easing

The standard jQuery API has a method called animate(). This can be used to reposition elements on the page by changing their stylesheet values. Examples may include changing the left/right position values, increasing the width/height of an element, etc.

This animate function comes with a very basic set of values for transition effects, also known as easing. When you include the jQuery UI library, there are dozens of new options to choose from. There are way too many for me to list out here. But check the jQuery UI easing demo, which includes a full compilation.

I personally don’t like the jQuery demo all that much. It can be confusing to look at and even harder to determine the correct syntax. Ralph Whitbeck has put together an amazing easing effects demo page that behaves exactly as you’d expect. Each effect is displayed with full source code and a “Run” button where you can re-run the easing demo over and over.

Note these effects are more useful when you know that you’re using the jQuery animate method. When you have a purpose of animating some element on the page, it feels creative to play around with an easing value. The customization is indeed small, but even the little effects build up to produce one outstanding user interface.

Related Links


Hopefully, this introduction to jQuery UI animations can leave you thirsting for more knowledge. Similar to jQuery itself, the user interface library has dozens of features you need to play around with.

You can understand so much by dabbling in a few tutorials and building practice interfaces for the thrill of learning.


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.