jQuery Effects

Dec 19, 2012

Table of contents:

1. The basics
2. Fading
3. Sliding
4. Advanced
5. Conclusion

An important part of adding jQuery to your website or web application is the use of effects to transition between states or to create a more seamless sense of interaction. We’ve already seen some of the jQuery effects in the previous tutorials, but as a final instalment to the series, I’ll cover the most common jQuery effects in more detail.

By using these standard animation effects, or combining them with the more advanced techniques, you can create immersive application like experiences right in the browser. And of course, jQuery makes it really easy too!

If you have missed any of the previous jQuery tutorials, you might want to take a look at them first:

• Introduction to jQuery
• jQuery - Manipulating content
• jQuery Mouse Events
• jQuery Form Events
• jQuery Ajax

jQuery effects essentially breakdown into Basic animations, Fading, Sliding and finally, more advanced Custom effects.

The basics

We’ve already seen the basic jQuery effects in many of the previous tutorials. The basics are really essential to using jQuery, so it’s easy to think of them as part the core tools, rather than as “effects”.

Here is an overview of each of the basic jQuery effects.

Hide

As we’ve already seen, the hide method simply hides an element by adding the style display: none. This will simply hide the selected element straight away.

$("span").click(function () {
  $(this).hide();
});

You can also pass the hide method an argument to make the effect into an animation and an optional callback function to be fired once the animation has finished.

$("span").click(function () {
  $(this).hide("slow", function () {
    alert("See ya!");
  });
});

In this example, I’m setting the easing duration to “slow” and I’m popping an alert box through the callback function. The “slow” duration represents 600 milliseconds. You can either specify the duration of the animation as milliseconds or as a keyword like “slow” or “fast”.

Show

Again, we’ve already seen the Show method in the previous tutorials, but it’s worth going over again. The Show method will reveal an element that is set to hidden.

$("span").click(function () {
  $(this).show();
});

You can also animate the Show method in just the same way as the Hide method by providing a duration and an optional callback.

$("span").click(function () {
  $(this).show("fast", function () {
    alert("oh hai!");
  });
});

Toggle

And finally, the last effect we’ve already seen is Toggle. The Toggle method will simply switch between Show and Hide depending on whether the element is currently visible or not.

$("span").click(function () {
  $(this).toggle();
});

And just like the Show and Hide methods, you can also specify a duration and an optional callback function to be fired once the animation is finished.

$("span").click(function () {
  $(this).toggle("slow", function () {
    alert("Switched");
  });
});

These three basic effects will become part of your staple jQuery toolset as they are really useful for doing just about anything in jQuery and so it is important to understand and remember them.

You will probably only ever need the rest of the effects in this tutorial when you need to specifically to do something. Therefore, I wouldn’t worry too much about learning every intricacy straight away.

Fading

The Fading methods are useful for adjusting the opacity of an element. This can be handy if you want to transition between two states, or if you want to load new content into the DOM.

Fade Out

The Fade Out method adjusts the opacity of an element down to 0. Once the element has reached an opacity of 0, the element is also set to hidden. This is important because the element won’t just be invisible, it will also not effect the rest of the page or take up any room.

The basic Fade Out method is simply attached to the element and passed a duration:

$("span").click(function () {
  $(this).fadeOut("slow");
});

You can also pass an optional Callback to be fired once the animation is complete:

$("span").click(function () {
  $("this").fadeOut("slow", function () {
    alert("GONE :O");
  });
});

Fade In

The Fade In method is essentially the opposite of the Fade Out method in that it transitions an element with display:none to display:block by adjusting the opacity from 0 to 1.

To use the Fade In method, you simply attach it to an element and pass it a duration:

$("span").click(function () {
  $(this).fadeIn("fast");
});

And once again you can pass an optional Callback:

$("span").click(function () {
  $("this").fadeIn("slow", function () {
    alert("I'm baaaaack!");
  });
});

Fade To

The Fade Out and Fade In methods are useful when you want to completely hide or show an element. The Fade To method, on the other hand, allows you to fade an element to a set opacity. This is really useful if you just want to fade an element a little bit, rather than hide it completely.

In this example, I’m setting the span to slowly transition to 50% opacity. Once the animation is complete an alert box is fired.

$('span').click(function () {
    $(this).fadeTo('slow', 0.5, function () {
        alert('OooOoooo I'm like a ghost');
    });
});

Fade Toggle

The Fade Toggle method, as it’s name suggest, will toggle between Fade In and Fade Out, depending on what is set in the display property. For example, if the display property was set to “none”, the Fade Toggle method would set it to “block”.

In this example, I’m using the Fade Toggle method to slowly fade in and out. Once the animation is complete an alert box is fired in the Callback.

You’ll also notice that I’m using a span with a class of “switch” and a span with a class of “that”. As I mentioned previously, once an element has faded out, it is no longer clickable in the DOM. So once you use the toggle to hide an element, you can’t toggle it back because it is hidden. Therefore, you can’t use this method on it’s self.

$("span.switch").click(function () {
  $("span.that").fadeToggle("slow", function () {
    alert("oh hello");
  });
});

Sliding

Sliding is a common effect that animates the height of an element and therefore makes it seem like the element is sliding up or sliding down. This is a useful effect when you want to reveal some extra content, or hide something away.

Slide Down

The Slide Down method animates an element by revealing it from the top. This is actually achieved by increasing the height of the element.

For example:

$("span.click").click(function () {
  $("div.show").slideDown(1000);
});

In this example I’m using the Slide Down method and passing it a duration of 1000 milliseconds. Just like any of the previous effects, you can also pass the method an optional Callback function to be fired once the animation is complete.

Slide Up

The Slide Up method is the opposite of the Slide Down method in that it animates an element by decreasing it’s height. Once the height of the element reaches 0, it is given the display property of “none” so it will no longer effect other elements on the page.

$("span.click").click(function () {
  $("div.show").slideUp(1000, function () {
    alert("See ya!");
  });
});

In this example I’m once again passing a duration of 1000 milliseconds. This time I’m also passing a Callback function.

Slide Toggle

And finally, as you can probably guess, the Slide Toggle method will switch between Slide Up and Slide Down depending on the current state of the selected element.

For example:

$("span.click").click(function () {
  $("div.show").slideToggle(1000, function () {
    alert("Switched!");
  });
});

Advanced

The standard jQuery effects that we’ve covered so far are perfect if they achieve the result you are looking for, but what if you want to create a very specific custom effect?

Fortunately, jQuery provides a number of methods for creating custom effects.

Animate

The Animate method allows you to animate the CSS properties of an element. To do this, you simply pass a map of the properties and how you want to animate them.

For example (taken from https://api.jquery.com/animate):

CSS

div {
  background-color: #bca;
  width: 100px;
  border: 1px solid green;
}

HTML

<button id="go">Run</button>
<div id="block">Hello!</div>

jQuery

$('#go';).click(function() {
    $('#block').animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, 1500 );
});

If you run this example in your browser you will see that we can quite easily create a custom animation.

Other custom methods

jQuery also provides a number of other methods for creating custom animations, such as:

• Delay
• Queue
• Stop
• Dequeue
• Clear Queue
• jQuery FX Interval
• jQuery FX Off

I won’t go into detail for each of these custom methods because is really out of the scope of this tutorial as an overview of what you can expect from jQuery effects. Just remember, even if the effect you are looking for isn’t available as a predefined method, you will probably be able to achieve the effect by combining some of these methods together.

Conclusion

jQuery effects offer a really good way to make transitions and animations that really bring your websites or web applications to life. By combining methods together, you can create immersive application-like experiences right in the browser.

This is the last of the Culttt jQuery tutorials. This series was meant as an introduction to jQuery and to show what is possible. jQuery can seem overwhelming when you first start looking at it. Hopefully this series shows that it’s actually really easy to get stuck in and make stuff that just works.

Look out for future jQuery tutorials that cover specific use cases, advanced topics and how you can use jQuery to really bring your projects to life!