Create Animated Rollovers with jQuery

with Chris Converse
please wait ...
Create Animated Rollovers with jQuery
Video duration: 0s 29m 26s Intermediate


In this project-based course, author Chris Converse brings interactivity to a sample video gallery using the open-source JavaScript library jQuery. Working in a coding environment, Chris shows how to animate the captions and play icon, extend the thumbnails into filmstrips, and modify the filmstrip backgrounds to change on rollover using CSS.

Take a look at the finished web site here.

Topics include:
  • Updating the CSS to prepare for animated captions
  • Adding the jQuery hover statement
  • Setting a JavaScript timer
  • Animating the thumbnail filmstrip backgrounds

Previewing the project across browsers and devices

Hi! This is Chris Converse and this is a course I am creating some animated rollovers for your web site using jQuery. So I want to start by opening up the final project inside of the exercise files and take a look at what we are going to be creating throughout the course. In the first option we are going to be using jQuery to simply change elements that are already on the screen and we are actually going to use content from a previous course called Creating an Interactive Video Gallery as content for the course. Of course, you can use these same techniques in any web site targeting any HTML elements. Now in the video course we had captions that were over top of these thumbnails.

In this course we are going to take those captions and move them off the stage so that we can't see them over top of the individual thumbnails and when I roll my cursor inside of the thumbnails we are going to animate those captions up. We are also going to take the play icons, set their transparency to about 50%, and then we are going to bring the opacity of those up as well. In addition if captions have different heights we are actually going to move the play icon so that it overlaps the caption box by the same amount each time. So when I roll over the next thumbnail, which is a three line caption, you will notice the icon will move up as well.

If I roll into a caption that's only got one line of the copy the icon will move down again to make the relationship of the play icon and caption the same. Now in the second option we are going to change the background picture of the thumbnail as well. So let me open up option_ 2 inside of our browser. Now the first thing you will notice in the lower left is we have a timer that's constantly counting and if I roll my cursor inside of the thumbnails we will see that the background graphic of the thumbnail is changing in addition to the animation of the play icon and the animation of the caption.

Now as I roll into each one of these we will be switching the background graphics using CSS changes from jQuery and this will give us a little bit of a more dynamic feel for the individual keyframes for the video. Now since we are standardizing on jQuery here we do get the same user experience across different platforms. If we move over here into Windows 7 running IE9 I am going to take option_2 and just drag that into a browser and take a look at the same user experience running on Windows in IE9.

Next, we will move over to Windows XP. Now over in XP we are going to get the same user experience inside of IE7 and 8 as well. However, there's one thing that we can't support inside of 7 and 8 and that is setting transparency on an already semi-transparent PNG file. So one thing you will notice when I roll into each one of these icons is once the icon has some transparency applied to it through CSS and through jQuery we will get this black halo that shows around the outside of the PNG file. When I roll away the PNG file will pick up its semi-transparency, but we won't be able to get rid of that black halo.

Now if you do want to have this user experience consistent for IE7 and 8 as well during the course I'll show you the places in the JavaScript where we can make this change so that we are not setting opacity for the play icons. So with that I hope this course sounds interesting and if so let's get started with the first movie.

There are currently no FAQs about Create Animated Rollovers with jQuery.

please wait ...