Time for action – sliding elements in and out of view
Displaying captions when a visitor hovers over an image is an interactive and interesting way of displaying additional information about the image without making your design appear cluttered. With the slide effect we can easily animate the showing and hiding of the caption, which is what we'll do in this example.
- Add the following code to
<body>of the template file:<div id="image"> <img src="img/mantis.jpg" alt="Praying Mantis"> <div>Praying Mantis: Mantis religiosa</div> </div>
- Then at the bottom of the page, in the empty function, add the following short script:
$("#image").hover(function() { $(this).find("div").stop(true, true).show("slide"); }, function() { $(this).find("div").stop(true, ...
Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
