fadein effect with scriptaculous

Question

I want to fade effect of the div, the following script doesn't work. What can be the problem? Thanks a lot.

function fadeIn(){

    $('test').invoke("fade", {
        from: 0, 
        to: 1,
        afterFinish: function() {

             $('test').setStyle({
                 display: 'block'               
             });           
        }
    });
}

<div class='top'>
    <div id="test" style="display:none">
         Fade in test
    </div>
</div>

<a href="#" onClick="fadeIn(); ">Click me</a>

Answer 1

The problem is that invoke is a method of Enumerable, and $ returns an Element, not an Enumerable.

Since $ is effectively an alias for getElementById, there is no need for it to return an array of elements (you can only have one element with any given id, so only one element will ever be returned).

You can just call fade directly on the element:

$('test').fade({
    from: 0, 
    to: 1,
    afterFinish: function() {
        $('test').setStyle({
            display: 'block'               
        });           
    }
});