Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have the two variables created for the captionPosition and the iconPosition inside of the First function, inside of the jQuery hover function, after the two variable declarations, let's type a $(this).children, beginning and ending parentheses, two tick marks, string literal .caption, outside .animate();, inside of the animate we're going to type two brackets, inside of the brackets we're going to type top:captionPosition+, two tick marks for the string literal, px.
So this is going to give us 85 minus the height of the caption, so this is going to be the new captionPosition height. Outside of the brackets we're going to type , 250, this is going to be 250 milliseconds or quarter of a second. On the next line $(this).children ('img.play'), so any image tags with a play class assigned to them, .animate();, inside we're going to put two brackets, inside of the brackets we're going to type top:iconPosition+'px'.
Now after the px if we want to change the image opacity, again, this isn't going to work in 7 and 8, we're going to type , opacity:1.Outside of the brackets comma space 250 milliseconds. So now when we roll over this we're going to set the captionPosition and the iconPosition, and then we're going to animate the caption to the new captionPosition and we're going to animate the img.play to the iconPosition which is going to be captionPosition - 32 and we're going to set the opacity to one.
Then when we rollout we want to set these back. So let's come into the second Function and break that open on the brackets, let's hit a space and to save time, I'm going to come up here and copy these two lines here. Let's come down inside of the second function which is on rollout, let's paste those two in there. So the caption instead of setting this to individual variable we're going to come in here and set the top to 116 and we're going to put 116 all inside of the string literal, and for the second one, for the img.play we're going to set the top to 25 pixels, and the Opacity we're going to set back to 0.5.
And again, if you want this to work in IE 7 and 8 then don't set the opacity on this either. Now before we save this I realize I did misspelled children here, so let's come in here and make sure we have .children for the image play. Now with that change made, let's choose File>Save All. Let's switch back to Design view, let's click on Live view, and now when we roll into our thumbnails, we'll see the icon comes up to 100% of its setting and the caption will animate, and as I rollover the different captions as the captions get larger and smaller the icon will actually animate to be exactly 18 pixels overlap on that new caption setting.
Now that this works, in the next movie we're going to start by creating the alternate option which is to have the thumbnails actually change their states while the captions animating and the thumbnails animating.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.