Question

I have a html page in which I made some animations with the vectors drawn on a Raphael canvas using the Raphael JS library. So, here’s the scenario in which I am facing a bit of confusion.

At the initial point, there needs to be a circle on my html page, with a click event handler. Clicking on the circle should fade out the rest of the page and play some animations with the circle. I can play the animations for now, but how do I fade the rest part of the such that only the circle and its animation come out highlighted on the page?

Answer 1

1. Create overlay DIV with 100% width and height, z-index above rest of the page and display:none property (in this overlay div you will have canvas)
2. On circle click event use jquery $(“#overlayDiv”).fadeIn()
3. Now do dirty things you were trying to do with animation.