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

(whooshing) - [Voiceover] Hi, this is Chris Converse, and this is a course on creating some animated rollovers for your website, 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're gonna be creating throughout the course. In the first option, we're gonna be using jQuery to simply change elements that are already on the screen. And we're actually gonna 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 website, targeting any HTML elements.

Now, in the video course, we had captions that were over top of these thumbnails. In this course, we're gonna 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're gonna animate those captions up. We're also gonna take the play icons, set their transparency to about 50%, and then we're gonna bring the opacity of those up as well. In addition, if captions have different heights, we're actually gonna 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'll notice the icon will move up as well.

I roll into a caption that's only got one line of copy, the icon will move down again, to make the relationship of the play icon and the caption, the same. Now, in the second option, we're gonna change the background picture of the thumbnail as well. So let me open up option two, inside of our browser. Now, the first thing you'll 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'll 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'll 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 key frames 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'm gonna take option two and just drag that into a browser and take a look at the same user experience running on Windows and IE9.

And next we'll move over to Windows XP. Now, over in XP we're gonna 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'll 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'll 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 will show you the places in the JavaScript where we can make this change, so that we're 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.

please wait ...