script.aculo.us Effects - Combination Effects

Combination Effects: All the combination effects are based on the five Core Effects. Usually these effects rely on the parallel, synchronized execution of other effects. Because such an execution is readily available, creating your own combined effects is very easy. Here is a list of Combination Effects:

Syntax: new Effect.<effectname>('id_of_element', [options]); OR new Effect.<effectname>(element, [options]);

1.Effect.Appear: Make an element appear. If the element was previously set to display:none; inside the style attribute of the element, the effect will automatically show the element.
This means that display must be set within the style attribute of an object, and not in the CSS in the head of the document or a linked file. In other words, this Effect will not work if display:none; is set within style tag or linked CSS file.
NOTE: This effect is very similar to Opacity effect but there is a subtle difference. The Appear effect will ensure that the element is part of the document flow before it adjusts the opacity.
So, if you want the element to remain part of the document display while its opacity is changed, use the Opacity effect. To remove and replace the element from the document as part of a fade-out/fade-in sequences, use Appear effect instead of Opacity.
function ShowEffect(element){ new Effect.Appear(element, {duration:1, from:0, to:1.0});}
function HideEffect(element){ new Effect.Appear(element, {duration:1, from:1.0, to:0});}

2. Effect.Fade: Makes an element fade away and takes it out of the document flow at the end of the effect by setting the CSS display property to none. Opposite of Effect.Appear
function FadeEffect(element){ new Effect.Fade(element, { duration:1});}

3. Effect.Puff: The Puff effect is a combination of the Opacity and Scale effects that causes the element to be removed from the document flow, and then to grow from its center while fading away into invisibility.
function PuffEffect(element){ new Effect.Puff(element, {duration:3}); }

4. Effect.DropOut: The DropOut effect combines core effects to remove an element from the document flow in an animated fashion. In this case, the Opacity and MoveBy core effects are combined to make it look as if the element drops off the page towards the floor.
function DropOutEffect(element){ new Effect.DropOut(element, {duration:3}); }

5. Effect.Shake: The Shake effect causes the target element to move back and forth horizontally three times, simulating the shake of a head. This effect ignores any setting of the duration option.
function ShakeEffect(element){ new Effect.Shake(element);}

6. Effect.SwitchOff: The SwitchOff effect resizes the target element vertically from the top and bottom towards its center line, and then removes it from the document layout. A bit of opacity flickering is added to help mimic its real-world inspiration.
function SWEffect(element){ new Effect.SwitchOff(element, {duration:3});}

7. Effect.BlindDown: This effect simulates a window blind, where the contents of the affected elements stay in place.
function BDEffect(element){ new Effect.BlindDown(element, {duration:3});}

8. Effect.BlindUp: This effect simulates a window blind, where the contents of the affected elements stay in place.
function BUEffect(element){ new Effect.BlindUp(element, {duration:3}); }

9. Effect.SlideDown: This effect simulates a window blind, where the contents of the affected elements scroll down.
function SDEffect(element){new Effect.SlideDown(element, {duration:3});}

10. Effect.SlideUp: This effect simulates a window blind, where the contents of the affected elements scroll up.
function SUEffect(element){ new Effect.SlideUp(element, {duration:3}); }

11. Effect.Pulsate: The Pulsate effect fades the target element to invisibility and back to full opacity five times, giving the effect of pulsating in and out of existence.
function PulsateEffect(element){new Effect.Pulsate(element, {duration:3});}

12. Effect.Squish: The squish effects animates the removal of the target element from the document display by scaling its size down to nothing in the vertical and horizontal directions while holding its upper left corner stationary.
The net visual effect is that the element is squished into its upper-left point until it vanishes.
function SquishEffect(element){ new Effect.Squish(element, {duration:3});}

13. Effect.Fold: The Fold effect is similar to the Squish effect except that the scaling is performed serially, first in the vertical direction, then horizontally, giving the illusion that the element is being folded up, then over.
function FoldEffect(element){ new Effect.Fold(element, {duration:3});}

14. Effect.Grow:This effect gives illusion of zooming out an object. Item start growing from a small point forming the complete item.
function GrowEffect(element){ new Effect.Grow(element, {duration:3});}

15. Effect.Shrink: This effect reduces the element to its top-left corner.
function ShrinkEffect(element){new Effect.Shrink(element, {duration:3});}

16. Effect.toggle: The Effect.toggle allows to toggle you between hide and show, slide up and slide down, and blind up and blind down. For example, this checks if element is in hide state then it will show that element.
This utility function is most useful in scripts where the current state of the element is unknown or moot, and toggling the element to the opposite state is all that matters.

Syntax: Effect.toggle( element, [effectType], [options] );
Where effectType is one of the strings:
* If effectType is set to appear, the Fade and Appear effects are used to toggle the element into and out of visibility.
* If effectType is set to slide, the SlideUp and SlideDown effect are used.
* If effectType is set to blind, the BlindUp and BlindDown effect are used.
If the effectType is omitted, the default is appear

function AppearEffect(element){new Effect.toggle(element, 'Appear', {duration:3});}
function BUDEffect(element){new Effect.toggle(element,'Blind', {duration:3});}
function SUDEffect(element){new Effect.toggle(element,'Slide', {duration:3});}