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.

JQuery Hovering Scroll to Top Button

Looking for an easy way to help your readers power through long web pages? Sick of scrolling for minutes at a time to get to the top of the document? Here’s a simple Scroll to Top button that hovers in the bottom right corner of your screen. Best of all, it’s made entirely from JQuery, CSS, and HTML, so you can easily drop it into preexisting pages and customize it to your hearts content.

The code is largely adapted from Brian Cray and David Walsh, but it’s a combination of the two ideas with the addition of a fade effect on the button and smooth scrolling action. Also, I moved the button to the bottom right corner of the page because I thought it was a little less intrusive. The browser will nicely and smoothly scroll up to the anchor when users click the link, and this is thanks to the super helpful ScrollTo plugin for JQuery, built by Ariel Flesler.

What’s that? You want to see it in action? Okay, you should check out the demo!

And without further ado, here’s the code. First, add the button and the anchor to your web page or template. The button should go at the bottom of your page, right above the </body> tag. And, the anchor should go at the top of your page.

<div id="top"></div> <!--this goes at the top-->
<div id="message"><a href="#top" id="top-link">Scroll to Top</a></div> <!--this goes at the bottom-->

Now, you’ll need some CSS to format the look and feel of the button. As you probably noticed, I left a gap at the bottom of the page so you can read the last few lines of text without being obstructed by the button. Here’s the stylesheet:

.container {padding: 0 0 70px 0;} /* the gap for the bottom */

#message
{
/* display: block before hiding */
display: block;
display: none;

/* link is above all other elements */
z-index: 999;

/* link doesn't hide text behind it */
opacity: .8;

/* link stays at same place on page */
position: fixed;

/* link goes at the bottom of the page */
top: 100%;
margin-top: -80px; /* = height + preferred bottom margin */

/* link is centered */
left: 80%;
margin-left: -80px;

/* round the corners (to your preference) */
-moz-border-radius: 24px;
-webkit-border-radius: 24px;

/* make it big and easy to see (size, style to preferences) */
width: 300px;
line-height: 48px;
height: 48px;
padding: 10px;
background-color: #000;
font-size: 24px;
text-align: center;
}

#message a { color: #fff; }

And, of course, the JQuery. Make sure you have JQuery and the ScrollTo plugin included in the source:

$(function () { // run this code on page load (AKA DOM load)

/* set variables locally for increased performance */
var scroll_timer;
var displayed = false;
var $message = $('#message');
var $window = $(window);
var top = $(document.body).children(0).position().top;

/* react to scroll event on window */
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () { // use a timer for performance
if($window.scrollTop() <= top) // hide if at the top of the page
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false) // show if scrolling down
{
displayed = true;
$message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); });
}
}, 100);
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});

… and there you have it! Let me know how it works for you in the comments, and feel free to share the code snippet with friends. Include your suggestions as well: I’m interested in good ways to expand the functionality.