The Apple effect looks and behaves like you might have seen on apple.com.
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.
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.
Here is a full list of available configuration options for this effect. These options are added to the Overlay's normal configuration options.
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:
||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).|
||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:
- Use $(window).load() instead. This will definitely be executed after the stylesheets have been loaded.
- Define your overlay style directly on the page or inline for the element.