JQuery for Beginners: Using Simple JQuery Effects for a Rockstar User Interface

This is the second part of my series on JQuery for Beginners. Be sure to check out the first part of the JQuery tutorial series where I introduce the framework and show readers show to use selectors, hierarchies, and attributes.

Simple Effects

One of my favorite parts about the JQuery library is the built-in effects, which can be tied into the events manager to animate the appearance and disappearance of elements in the web page. That is, you can make things like div and a elements slide or fade with ease.

So, the first thing we need to do is create a link and a paragraph to play with. My goal is to make the paragraph do things (i.e. slide and fade) when users click on the link. The most important thing is use fill in the id attribute of the paragraph and the link. Without it, JQuery won’t as easily know which elements we are referring to.

<p id="paragraph">This is the demonstration paragraph.</p>
<a href="#" id="link">Click this to do things!</a>

Now, we’ll get started with the JQuery. First, we want to declare a function that runs right when the page loads. We do that with $(document).ready. After that, we need to select the link and drop it into a function. We call the link with $("#link"), and make it react to click. Then, we select the paragraph, and do something with it. Here, we’ll hide it. Here’s the source code:

$(document).ready(function(){
    $("#link").click(function () {
      $("#paragraph").hide();
    });
  });

Slides, Fades, and Toggling

As soon as the page loads, JQuery finds the link and attaches an action to it when the link is clicked. That action, located inside the function, will hide the paragraph called #paragraph. Using the same format, you can swap in a whole variety of effects using the same pattern. For instance, you can make the paragraph fade out with the fadeOut method. Here’s some good ol’ source code for you:

$(document).ready(function(){
    $("#link").click(function () {
      $("#paragraph").fadeOut();
    });
  });

Here’s the full list of effects you can use like this:

show
hide
toggle
slideDown
slideUp
slideToggle
fadeIn
fadeOut

Speed and Callbacks

But you want more fine-tuned control, don’t you? Well, you can do two more things with these effects methods. First, you can pass a first argument that controls the speed of the animation. This can use one of three predefined speeds (such as slow, normal, and fast) or a speed defined in milliseconds (134 milliseconds, and not a millisecond more). The other thing you can do is add a callback. A callback is a function that will be called as soon as the effect is complete. For instance, you can make a fast fade out that alerts you when it is done:

$(document).ready(function(){
    $("#link").click(function () {
      $("#paragraph").fadeOut("slow", function () {
         alert("I'm done!");
    });
    });
  });

Custom Effects

So you want to add a little bit more customization that you have with the built-in effects? Well, then it’s time to make a custom animation. I’m going to omit the ready and the click function, so refer to the code samples above if you are still murky on the idea. In general, the custom animation method takes the following form:

$("#paragraph").animate({width: 50%, opacity: 0.5}, "slow", "swing");

The first attribute in the brackets is a series of styles you want to animate to. These are based on CSS. In my example, I’m going to increase the size of the paragraph by 50 percent and I’m going to half the opacity. The next parameter is the duration; here, I’m going to resize and dim slowly. The last parameter is easing. Easing, in a nutshell, controls the evenness of the animation. linear will make it the same speed the entire time. swing will make the animation faster toward the end. You can also include an optional callback as the last function.

I Hate Animations

One problem is that animations tend to destroy the notion of simple web design. Yes, they can add a more natural feel to the UI, but they can also make things a bit too flashy for a minimalist. Therefore, you may want to give users the option of disabling all animations. Anytime the following method is called, all animations will cease to work.

jQuery.fx.off = true;

Of course, you can turn it back on by setting it to false.

Wrap Up

I hope you find this quick premier on JQuery effects useful. Please, add any corrections and suggestions to the comments. And, of course, follow me on Twitter to get notified of the next JQuery installment.

Cherrysave