Question

This is not working:

<div id="draw">
        <script>
                    $(document).ready( function () {

                        var filler = {
                            'fill': 'white',
                            'stroke': 'white',
                            'stroke-width': '0',
                            'cursor': 'pointer'
                        }

                        var paper = Raphael(100, 296, 175, 5);

                        var rectangle = paper.rect(0, 0, 5, 5);
                        rectangle.attr(filler);
                        rectangle.node.id = 'rectangle';

                        $("#rectangle").hide();
                        $("#rectangle").fadeIn('2000');

                    });
        </script>
</div>

Nothing is shown. If I use only hide() it hides the rectangle. However, I want to fadeIn then, I tried to use #rectangle { display: none; } in my css file and then use fadeIn, but it is not working either.

I don’t understand what am I doing wrong at all. I am not using remove(), but only hide(), so why it will not show?

The firebug shows that style=”display:none;”; . Even when I remove the css for display none (#rectangle { display: none; }) from my css file.

It seems like after hide() you can not use fadeIn() function, but why?

Thanks in advance for your help.

Answer 1

Raphael does have only animation opacity for simulation of fadeIn and fadeOut. Maybe some future versions bring this to life. Just deal with it for now. Have a nice day.