How to Work with Advanced Easing in jQuery UI Special Effects in CSS3 - dummies

How to Work with Advanced Easing in jQuery UI Special Effects in CSS3

By John Paul Mueller

Many applications require that you show or hide CSS3 elements at different points of application execution. It may be something as simple as not needing the element at that particular time (such as a progress bar). In most cases, you simply want the element to go away. Whether the user notices the disappearance is immaterial to the application’s functionality.

However, you may want the user to notice the change in some situations. For example, a user might select an option that makes other options inaccessible. Using a special effect to make this more noticeable could be helpful.

The jQuery UI library provides several means of controlling element visibility in an animated manner. The fact that the element is shown or hidden doesn’t change, but the way in which the application shows or hides it does.

For example, you could use a slide effect to show that a new element has been added due to a choice the user has made. There are four main methods of animating elements by using this technique:

  • Use an effect where the element visually changes.

  • Show a hidden element by using an effect.

  • Hide an element by using an effect.

  • Toggle an element’s visibility by using an effect.

The effect that you choose for working with an element controls how jQuery UI visually manages it. For example, an explode effect causes the element to break into pieces, with each piece moving in a different direction off screen. The following keywords define the sorts of effects that you can use (you can find additional details at jQuery):
















In addition to the actual effect, you can use an easing function to make the effect more pronounced or special in other ways. You can see a list of easing functions at jQuery.

The following example shows how to use all four approaches for working with element visibility. There are actually four buttons used for the example, but element visibility limits you to seeing just three at a time because you can’t show an element that’s already visible or hide an element that’s already hidden.

You can find complete code for this example in the Chapter 06Animations folder of the downloadable code as Visibility.HTML.

 // Keep track of the element hidden state.
 var Hidden = false;
  "bounce", "easeOutBounce", 1500);
  Hidden = false;
  "slide", 1500, ChangeButtonState);
  Hidden = true;
  "explode", 1500, ChangeButtonState);
  Hidden = !Hidden;
  "scale", {percent: 0}, 1500,
 // Set the button state as needed.
 function ChangeButtonState()
  if (Hidden)
  $("#Show").attr("hidden", false);
  $("#Hide").attr("hidden", true);
  $("#Show").attr("hidden", true);
  $("#Hide").attr("hidden", false);

The example begins by creating a variable, Hidden, to track the state of the element. When the element is hidden, the Show button is displayed. Likewise, when the element is displayed, the Hide button is displayed as well. This functionality is controlled by a callback function, ChangeButtonState().

The code for the Effect button simply performs an effect on the element, SampleText. In this case, you see the bounce effect. The performance of this effect is modified by the easeOutBounce easing function, and the entire animation lasts 1500 milliseconds.

The actual visibility is unchanged, but the user sees an animation of the element onscreen. You could use this technique to point out fields that have incorrect information or require additional information. Of course, you can also use it to perform any other sort of simple animation desired — including a looped animation, where the animation is constantly replayed.

The Show and Hide button code work hand-in-hand to hide or display SampleText. The Show button uses the slide effect, and the Hide button uses the explode effect. Both perform the task over 1500 milliseconds.

Notice that both event handlers set the state of Hidden directly because the state is an absolute based on the task that the button performs. The event handlers also provide ChangeButtonState() as a callback function. The animation calls this function after the animation has completed to set the button state correctly.

The Toggle button works like a combination of the Show and Hide buttons — the event handler simply toggles the SampleText visual state. Because the state isn’t known, the value of Hidden is also toggled. In this case, the event handler calls the scale effect, which requires an additional argument in the form of percent.

Make sure you check the effects to determine whether they require additional arguments — most don’t. When the animation completes, the application calls ChangeButtonState() to reconfigure the user interface as needed.