Copyright © tutorialspoint.com

script.aculo.us Squish Effects

previous next


Advertisements

Description:

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.

Syntax:

You can use one of the following two forms to use this effect:

 new Effect.Squish('id_of_element', [options]);

 OR

 new Effect.Squish(element, [options]);

Effect Specific Parameters:

This effect does not have any other parameter except common parameters.

Example:

<html>
<head>
<title>script.aculo.us examples</title>

   <script type="text/javascript" 
   src="/javascript/prototype.js"></script>
   <script type="text/javascript" 
   src="/javascript/scriptaculous.js?load=effects"></script>
   <script type="text/javascript">

   function SquishEffect(element){
       new Effect.Squish(element, {duration:3});
   }

   function ShowImage(element){
       new Effect.Appear(element,{duration:1, from:1, to:1.0});
   }

   </script>
</head>
<body>

<div onclick="ShowImage('myimage')">
    Click me to display the image
</div>
<br />
<div id="myimage" onclick="SquishEffect(this);">
    <img src="/images/scriptaculous.gif" alt="script.aculo.us" />
    <h2>Click me to Squish me out</h2>
</div>

</body>
</html>

To understand it in better way you can Try it yourself.


previous next

Copyright © tutorialspoint.com