O'Reilly logo

PhoneGap Mobile Application Development Cookbook by Matt Gifford

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Animating an element

Although altering elements in our application's pages is relatively easy, we can further enhance the user's experience by adding some animation to these elements as we change them.

How to do it...

We will use the tween() method within the XUI library to alter a property of an image and tween the element to its new position on the screen.

  1. Create the initial HTML layout for the application. Include the XUI JavaScript library within the head tag of the document.
  2. Add an XUI ready event handler to run our code once the DOM has fully loaded.
    <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" /> <meta http-equiv="Content-type" content="text/html; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required