Home/ Questions/Q 4235388
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T02:29:35+00:00

I’m using the Raphael JS library, and I’m trying to figure out how to

  • 0

I’m using the Raphael JS library, and I’m trying to figure out how to make a point appear on screen, then disappear.

I use a for loop to create the points, and then I make them fade in. Is there a way that they can also fade out, and I can remove them?

I’m quite new to Javascript, so I don’t know the best strategy for dealing with this. I could not see how to to this in the Raphael documentation.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>blink point</title>        
        <script src="js/raphael.js"></script> 
        <!--<script src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>-->
        <script type="text/javascript">
        window.onload = function () {

            //Point Array
            pointList = new Array ();

            // Create Canvas
            var r = Raphael(10, 50, 600, 600);            

            // Make a 'group' of points
            for( i=0; i<20; i++){   

                    //Create Point            
                    pointList[i] = r.circle(10*i, 10*i,5);
                    pointList[i].attr({stroke: "none", fill: "#999", opacity: 0});

                    //Fade in   
                    pointList[i].animate({opacity: 1}, 1000 );  

            }

            // Remove points, starting with the first
            for( i=0; i<20; i++){           

                    //Try fading them out
                    //pointList[i].animate({opacity: 0}, 1000 );
            }

        };
        </script>
    </head>

    <body>
        <div id="holder"></div>         
    </body>
</html>

I also was not able to get the online link to the Raphael library to work, so it might be necessary to download the library.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can find working example here http://jsbin.com/uxege4/2/edit
    In details:

    Problem with your code – animation is done asynchronously and that means your program will be finished before fading in.
    So you need to set up callback function when animation will be ready. Here is quote from Raphael documentation:

    animate

    Changes an attribute from its current value to its specified value in the given amount of milliseconds.
    Parameters

    newAttrs object A parameters object of the animation results. (Not all attributes can be >animated.)
    ms number The duration of the animation, given in milliseconds.
    callback function [optional]

    Last parametr is what we need. You just need assign function to call after animation finished.

    • 0