How to use the jQuery hover and animate functions

I think this will be one of the more popular jQuery tutorials. The reason I feel this way is that we all like to see things happen when we interact with computer interfaces.

The hover function like most jQuery functions, is named after the very thing it does. The hover function has the ability to know when something is hovered over. It is also chainable. It can detect the state and then give you the power to chain some more functions so that something else can happen on the screen. This helps gives your page a much more dynamic feel.

The animate function can do several things to animate HTML objects. Today we’re going to look at opacity.

While you can use the CSS class to set transparency, I find that using the animate transparency is much more compatible in different browsers.

One more thing to note. On touch screen appliances this example will behave a little bit differently. Since there is no hover ability on a touch pad, when you tap these pictures the picture will change on the tap rather then on hovering.

The Setup

On my local web server I’ve create an extra images directory. I placed 4 pictures and called them 1.jpg to 4.jpg for easy reference in the post.

xhtml

As you can see there is not much to this example. There is a div containing all the images. Since img are inline type elements they will be “floated” next to each other. Because they are all the same height it will look much more appealing.

jQuery

Let’s break up the jQuery code. In reality there is two main parts of this script.

1. The first part automatically turns all the opacity of the images in the #photoGallery container to 1/2 of their original opacity.
2. The next part checks to see if an item is hovered over. If it is bring the opacity back to 100%. If an item is no longer hovered over return the opacity back to 1/2 of it’s original opacity.

There is one more part you might be wondering right about now.

The “.stop()” function is chained in the programming to prevent ghost animates. If you were to try the code without the stop and move the mouse over the pictures really fast back and forth. The picture would seem to continue to fade in and out even after you stopped move the mouse over the pictures.

The stop() function does exactly that. Any animation that is in running. Stop it. And now do this. This makes the code function much more you are used to in the Windows local app world.

*I highly recommend that you build up your code in the way I am doing in this post. *

When you type .hover program like Netbeans will automatically use code completion and this is what you’ll get. While it does somewhat help you I find that it still doesn’t help the beginner programmer all that much. Let’s look at the jQuery hints you are given when using it.

* NOTE *disregard the line number in these examples until I add back the opacity settings. *

Let’s look at the code structure without the opacity settings.

As you can see with the “over section” we’re going to run some code (a function) when something is hovered over, and then we are going to run another function when the mouse leaves the object.

Let’s build out the code so it’s a bit easier to read. I’ve added some comments to help.

Now let’s add back the opacity settings.

Here’s an example of the output. I’ve put my mouse over the 2nd picture and it comes back to 100% opacity.

You can see more of examples of this in my Photo and Portfolio pages.