Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Programming / jQuery / How to use the jQuery hover and animate functions

Oct 28, 2010 By Jared Heinrichs Leave a Comment

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

image

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

image

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. *

image

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

image

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.

image

Now let’s add back the opacity settings.

image

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

image

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

Filed Under: jQuery Tagged With: How To

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design