| 00:00 | Now to control where the thumbnails are
actually being placed and where they are
|
| 00:03 | being animated and for us to be able to
test whether or not the animated state
|
| 00:07 | is on the last thumbnail, let's come
inside of the animate thumbnail function.
|
| 00:12 | Let's hit a few Returns above where
we declare the variable new position.
|
| 00:16 | We are going to type if().
|
| 00:22 | Let's split the brackets open.
|
| 00:25 | Inside of the parentheses where we are
going to write our condition let's select
|
| 00:30 | window.thumbnailPosition variable.
|
| 00:32 | Let's copy that, paste in inside of here.
|
| 00:36 | So if window.thumbnailPosition space is
less than 800, and again remember that
|
| 00:42 | the X value is always on the left-hand side.
|
| 00:44 | So 800 plus the 200 width of
the graphic will give us 1,000.
|
| 00:50 | If the thumbnailPosition is
less than 800, let's paste
|
| 00:53 | window.thumbnailPosition += 200,
which means it's going to take the current
|
| 01:00 | value and add an additional 200 pixels.
|
| 01:03 | So as long as it's not 800,
it's going to add 200 each time.
|
| 01:08 | After the bracket we are going to type }else{.
|
| 01:13 | So if it is not less than 800,
let's paste window position again.
|
| 01:17 | We are going to set that
equal to 0 and then a semicolon.
|
| 01:20 | At this point let's hit File>Save.
|
| 01:24 | Let's switch over to our browser and hit Reload.
|
| 01:27 | Now we can see in the lower left-hand
corner the work test has now been replaced
|
| 01:31 | with the counting interval and we can
see that the numbers are counting up by
|
| 01:35 | 200 and remember we are taking a
value and then multiplying it by -1.
|
| 01:39 | So each of these values
here is -200, -400, -600, -800.
|
| 01:44 | When it gets to -800, the
next value goes back to 0.
|
| 01:50 | Now that our set interval is working
properly let's go back to Aptana Studio.
|
| 01:54 | Now if there are set interval
working properly when it gets to -800, it
|
| 01:58 | actually switches back to 0.
|
| 01:59 | What we are going to do here is after
the debug line let's add a new line and
|
| 02:06 | what we are going to do down
here is type $('a.VideoLink.hover').
|
| 02:19 | So any video links with the hover class.
|
| 02:22 | We are going to type .css outside,
beginning and ending parentheses, semicolon.
|
| 02:28 | We are going to set the css
property, two tick marks inside of the
|
| 02:33 | parentheses for string literal.
|
| 02:34 | We are going type background-position
outside of the first string literal, hit
|
| 02:44 | a comma, two more tick marks for a string
literal, the value is going to be set to.
|
| 02:50 | Now we are going to type tick mark
for string literal two + signs, another
|
| 02:55 | tick mark inside of the two plus signs we are
going to come up here and copy new position.
|
| 03:02 | Let's come down here and paste this.
|
| 03:05 | So now we are going to concatenate the
variable new position into the string
|
| 03:09 | literal which is going to be the value
of the background-position +px space,
|
| 03:15 | and then we are going to type 0 px
which is going to be the Y value which is
|
| 03:18 | always going to be set to 0.
|
| 03:20 | So now each time this
animateThumbnail function runs we are to test the
|
| 03:24 | position, we are going to set a new
position based on the window thumbnail
|
| 03:27 | times -1, and then we are going to set
the background position equal to that on
|
| 03:32 | the X and 0 on the Y.
|
| 03:35 | Now we do have a hover class inside of here.
|
| 03:37 | We are going to set a hover class on
the actual video link that we roll over,
|
| 03:41 | because we don't want all
of the links to animate.
|
| 03:44 | We only want the one that
were hovered over to animate.
|
| 03:47 | So that means we need to add one
more item inside of the hover states.
|
| 03:50 | So if we go down into the a.videoLink
into the hover class we are going to come
|
| 03:55 | down and after we set the img.play
animation setting we are going to type
|
| 04:15 | (this).addClass('hover');.
|
| 04:17 | So now when we roll over the thumbnails
not only are we going to set the caption
|
| 04:20 | in this position and set the
animations, we are also going to add the hover
|
| 04:24 | class to the item we've rolled over.
|
| 04:26 | Let's copy this and when we roll out let's
paste the addClass and change it to removeClass.
|
| 04:35 | Now let's hit File>Save, let's go over
to our browser, let's hit Reload and now
|
| 04:41 | we will see that when we roll in each
one of the items, the background graphics
|
| 04:44 | are going to change.
|
| 04:45 | They are going to change at the speed
we are seeing the numbers change in the
|
| 04:48 | lower left-hand corner.
|
| 04:49 | So in addition to the play icons
animating and the captions animating up, we
|
| 04:55 | also get the background graphics changing
on each of the items that were rolled over.
|
| 05:04 | Now with that, that concludes
the second option for creating the
|
| 05:06 | animated rollover states.
|
| 05:08 | In the next movie we will talk about
where you might want to go from here with
|
| 05:10 | some of these techniques.
|
| Collapse this transcript |
