Book Image

Learning jQuery - Fourth Edition - Fourth Edition

Book Image

Learning jQuery - Fourth Edition - Fourth Edition

Overview of this book

To build interesting, interactive sites, developers are turning to JavaScript libraries such as jQuery to automate common tasks and simplify complicated ones. Because many web developers have more experience with HTML and CSS than with JavaScript, the library's design lends itself to a quick start for designers with little programming experience. Experienced programmers will also be aided by its conceptual consistency. LearningjQuery - Fourth Edition is revised and updated version of jQuery. You will learn the basics of jQuery for adding interactions and animations to your pages. Even if previous attempts at writing JavaScript have left you baffled, this book will guide you past the pitfalls associated with AJAX, events, effects, and advanced JavaScript language features. Starting with an introduction to jQuery, you will first be shown how to write a functioning jQuery program in just three lines of code. Learn how to add impact to your actions through a set of simple visual effects and to create, copy, reassemble, and embellish content using jQuery's DOM modification methods. The book will take you through many detailed, real-world examples, and even equip you to extend the jQuery library itself with your own plug-ins.
Table of Contents (24 chapters)
Learning jQuery Fourth Edition
Credits
Foreword
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Taking fine-grained control of animations


Even as we've looked at a number of advanced features, jQuery's effects module offers much more to explore. A rewrite of this module for jQuery 1.8 introduced a number of ways for advanced developers to fine tune various effects and even change the underlying engine that drives the animations. For example, in addition to offering options such as duration and easing, the .animate() method provides a couple of callback options that let us inspect and modify an animation each step of the way:

$('#mydiv').animate({
  height: '200px',
  width: '400px'
}, {
  step: function(now, tween) {
   // monitor height and width
   // adjust tween properties
  },
  progress: function(animation, progress, remainingMs) {
  }
});

The step() function, which is called roughly once every 13 milliseconds for each animated property during the animation, allows us to adjust properties of the tween object such as the end value, the type of easing, or the actual property being...