script.aculo.us 生长效果

script.aculo.us 库是一个跨浏览器库，旨在改进网站的用户界面。在本文中，我们将演示增长效应。此效果用于使元素从一个方向平滑过渡。我们也可以调整效果的持续时间。

句法：

Effect.Grow( 'id_of_element', [options] )

要么

Effect.Grow( element, [options] )

选项：此选项对象有两个值，如上所述，如下所述：

• 方向：此值指定元素生长的原点。这些值可以是“左上”、“右上”、“左下”或“右下”。默认值为“中心”。
• 持续时间：此值指定效果的持续时间（以秒为单位）。默认值为 1 秒。

为了演示这个函数的使用，我们编写了一小段代码。我们在其中编写了一个名为 ShowEffect 方法的小 JavaScript函数，它使用了这个库的Grow方法。以下示例演示了该方法。

示例 1：

HTML

 

    
    
 
    
    
 
    
        function ShowEffect(element) {
 
            // Using the Effect.Grow() method
            // on the element with no options
            new Effect.Grow(element);
        }
    

 

    
        GeeksforGeeks
    
 
    script.aculo.us Grow Effect
     
    
        Click to Show the Effect
    
    
    
 
    
        
            GeeksforGeeks
        
    

 

输出：

示例 2：

HTML

 

    
    
 
    
    
 
    
        function ShowEffect(element) {
 
            // Using the Effect.Grow() method
            // on the element with the direction
            // and duration specified
            new Effect.Grow(element, {
                direction: 'top-left',
                duration: 5
            });
        }
    

 

    
        GeeksforGeeks
    
 
    script.aculo.us Grow Effect
     
    
        Click to Show the Effect
    
    
    
    
        LINE TO GROW
    

 

输出：