Five Useful Interactive CSS/jQuery Techniques Deconstructed - Practical JavaScript Techniques - page 41

Finally, we added a click event listener to the items in the bottom navigation. Similar to the
arrow navigation, we start by disabling the automatic animation, setting activeSlideshow to
false . Next, we trigger changeSlide() , passing in the index of whichever slide was clicked,
which is easy to determine using jQuery's index() method.

29

Now the slideshow navigation animation is complete and ready to impress your visitors.

•

Download the complete example 30

•

View the demo 25

5. Animated Icons

32

CSS-Tricks has a simple but elegant effect in its footer when the user mouses over various

buttons. Besides the color changing and an icon being added, the effect is animated in
browsers that support transition, making the icon appear to slide into place .

•

View the demo 33

Let's create a similar effect, starting with some mark-up:

< a href =" # " class =" hover-panel ">
< h3 > Panel Title </ h3 >

< p > Additional information about the panel goes in a paragraph here </ p >

</ a >

One thing to note about this mark-up is that it has block elements nested in an <a> element,
which makes sense semantically, but it's valid only if you're using the HTML5 doc type.