How to Employ Class Transitions with jQuery UI Special Effects in CSS3 - dummies

How to Employ Class Transitions with jQuery UI Special Effects in CSS3

By John Paul Mueller

Using CSS3 classes can have an interesting effect on the presentation of information onscreen. jQuery UI makes it possible to use CSS classes to perform animations in four different ways:

  • Adding a class

  • Removing a class

  • Switching between classes

  • Toggling a class

In all four cases, the effect doesn’t occur immediately — you provide a time delay to make the transition between presentations slow enough for the user to see. (You can find complete code for this example in the Chapter 06Animations folder of the downloadable code as ManageClasses.HTML.)

  "Effect", 1500, RemoveClass);
  return false;
 function RemoveClass()
  "Effect", 1500, "easeOutBounce");
  "Normal", "Effect", 1500, "easeInElastic");
  "Effect", "Effect2", 1500,
  "Effect2", "Normal", 1500,
  return false;
  $(".Normal").toggleClass("Effect", 1500);
  return false;

There are three buttons on the front of the page: Add/Remove Class, Switch Between Classes, and Toggle Between Classes. Each of these buttons is assigned an event handler as shown. The RemoveClass() function is a callback for the Add/Remove Class button. After the transition for the event handler has ended, the code automatically calls this function.

All of these animations work in precisely the same way — they add or remove classes to or from the specified element. In this case, a <div> named SampleText is the target of the animations. The difference between the method calls is how they perform their task.

The addClass() method performs a straightforward addition of a class. You supply the name of the class to add as the first argument. If the class already exists for the element, nothing happens. Likewise, the removeClass() method removes the specified class from the element. Again, you supply the name of the class to remove as the first argument.

The switchClass() method switches between one class and another. You can use it to create multiple transitions. For example, this example shows how to switch between three transitions. The Normal class is replaced with Effect, Effect is replaced with Effect2, and Effect2 is replaced with Normal.

Consequently, you see the animations rotate between three classes. You supply the name of the class to remove as the first argument and the name of the class to add as the second argument.

The toggleClass() method adds or removes a class depending on whether the class is assigned to the element. In this case, the code adds Effect when SampleText lacks it and removes Effect when SampleText has it applied. You supply the name of the class to toggle as the first argument.

jQuery UI can’t animate all styles. For example, there’s a transition between having the text left justified and having it centered in this example. This transition can’t be animated. What you see is that the effect occurs at the end of the animation.

In addition, some effects are animated, but they aren’t animated in the way you might expect. For example, if an element changes color, the new color is used throughout the animation, but you see it gradually fade in.

Each of these method calls includes a time delay of 1500 milliseconds. This value indicates the amount of time in which the animation occurs. The default setting is 400 milliseconds, which is a little hard for most people to see. However, this argument is optional, and you don’t have to supply it to make the method work.

The addClass() method includes another optional argument, a callback function. The callback function is called when the animation is over. The example uses the callback function to toggle the effect. However, a callback could be used for any of a number of purposes. For example, you could use it to create a validation sequence to ensure that users enter the correct data for form fields that have incorrect information.

An animation can also use an easing function. This function determines how the animation appears onscreen. The default setting is to use the swing easing function, which provides a gentle transition from the starting point to the end point that most users will appreciate (the animation starts a tiny bit slow, becomes a bit faster and more linear in the middle, and then ends a bit slow).

However, you might want a little more pizzazz or at least a different effect. You can see a list of easing functions at jQuery. This example uses a number of different easing functions so that you get an idea of how they work.