This is a message.

Apple Effect

The Apple effect looks and behaves like you might have seen on apple.com.

standalone demo

Overlaying is done in a visually appealing way by growing a background image from 0 to the desired size. If you choose to use this effect you are tied to the dimensions of the image. You can change the width but the height changes accordingly so that the aspect ratio remains the same.

Usage

The best way to learn is to study the full documentation for the example above. Here you can see the JavaScript setup for this effect: 

    $("#apple img[rel]").overlay({effect: 'apple'});

JavaScript

It's important to note that this effect is not included in the standard distribution of jQuery Tools. You need to include it yourself on the download page.

You may want to configure this effect as a default effect so that you don't have to define the effect property on every call. This can be achieved with global configuration.

Configuration

Here is a full list of available configuration options for this effect. These options are added to the Overlay's normal configuration options.

property default description
start (Object) 
{
  top: null,
  left; null,
  absolute: false
}

JavaScript

The starting position and dimensions of the animated image. By default, the starting position is the position of the element that triggers the overlay and typically you don't need to configure this option.

When the overlay is loaded programmatically with the load() API call, the default starting position is the centre of the screen. You can override these defaults using the following properties:

  • top specifies how far from the top edge of the screen the growing animation should start.
  • left specifies how far from the left-hand edge of the screen the growing animation should start.
  • absolute By default this is set to true so the starting position is measured from the top left-hand corner of the browser window and the scrolling position has no impact. By default the scrolling position is added.
fadeInSpeed 'fast' The speed at which the content fades in on top of the background image after the growing animation has completed. Valid values are 'slow', 'normal' and 'fast', or you can supply a numerical value (in milliseconds).
zIndex 9999 This is the CSS z-index property for the background image. A z-index specifies the placement of an element on a document's z-axis. This value must be greater than the z-index of any other element on the page so that the overlay will always be on top of other elements on the page. Note: If you are using the expose effect together with the overlay the zIndex of the expose mask is 9998 by default.

Using the Apple effect upon page load

Due to a major bug in jQuery you should not load overlays with the Apple effect upon document.ready() event when using external stylesheets. This causes unpredictable behaviour in Safari 3+ and Chrome (WebKit-based browsers). There are two workarounds for handling this: