Improving the user experience using effects

Effects and animations are never an indispensable part of any application, in the sense that with or without them people should still be able to perform the task they want. Under some circumstances, though, they can be useful for improving the experience of your users. In this project you can allow error messages and the dialog box to appear and disappear gradually instead of being displayed and hidden in a snap.

The first effect you can add affects the handler of the button of the dialog box. You can update your code so that the dialog box will be hidden slowly. Instead of using hide(), you can employ jQuery’s slideUp() method. You won’t pass any parameter to it so that the effect will last 400 milliseconds (the default). The resulting code is shown here:

$dialogBox.children('button').click(function() {
   $(this)
       .parent()
       .slideUp();
});

If you want to take control of the duration, feel free to pass a parameter to the method.

In the same way that you added an effect when the dialog is hidden, you can modify the way it’s shown. You can use slideDown() for this purpose, but for the sake of diversity, you’ll pass an argument to show(). As you’ll recall from section 8.2.1, you can pass either a number that specifies the number of milliseconds the effect will last or a string with a value of slow, normal, or fast. You don’t want your users to wait too long before the dialog appears, so you’ll pass the fast string and the effect will last 200 milliseconds.

Other effects can be added to the error messages, but we’ll leave this to you as a simple exercise to complete.

The effects you introduced may please some users but annoy others. In an attempt to provide a great experience for as wide an audience as possible, you have to keep many different points of view in mind. Let’s see what you can do for those who don’t want animations to run.

Toggling the effects

In lesson 8 we introduced you to jQuery’s flags. Among others, we discussed the fx.off flag that allows you to globally disable all the animations. To give the user this opportunity, you need to provide them an HTML element to use. In the demo you’ll employ a selection box with two options, On and Off, but you’re free to use any other HTML element that fits the purpose, like a check box or two radio buttons (one for each option).

The code of the select element is as follows:

<div class="animations-box">
   <label for="animations">Animations are:</label>
   <select id="animations">
      <option value="true" selected>On</option>
      <option value="false">Off</option>
   </select>
</div>

You’ll place this markup just above your form. Once you’ve done this, you need to add the logic so that this select will actually do something. To achieve this goal you have to listen for changes (using the change event) of the selected option and update the fx.off flag accordingly. The following code serves the purpose:

$('#animations').change(function() {
   $.fx.off = $(this).val() === 'false';
})
.change();

As you may have noticed, you not only listened for the change event but also triggered it just after having set the handler. This ensures that the flag is set to whatever default value the <select> assumes. This trick comes in handy if you want to use the Off option as the default value without the need to update the JavaScript code (setting the fx.off flag to true).

Before concluding this project, there’s one last point we want to discuss.