Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Overview of this book

Table of Contents (18 chapters)
Learning jQuery
Credits
About the Authors
About the Reviewers
Preface

Effects and Speed


When we include a speed with .show() or .hide(), it becomes animated—occurring over a specified period of time. The .hide('speed') method, for example, will decrease an element’s height, width, and opacity simultaneously until all three reach zero, at which point the CSS rule display:none is applied. The .show('speed') method will increase the element’s height from top to bottom, width from left to right, and opacity from 0 to 1 until its contents are completely visible.

Speeding In

With any jQuery effect, we can use one of three speeds: slow, normal, and fast. Using .show('slow') would make the show effect complete in .6 seconds, .show('normal') in .4 seconds, and .show('fast') in .2 seconds. For even greater precision we can specify a number of milliseconds, for example .show(850). Unlike the speed names, the numbers are not wrapped in quotation marks.

Let’s include a speed in our example when showing the second paragraph of Lincoln’s Gettysburg Address:

$(document).ready...