javascript - use raphael animations on images -
following situation:
i have raphael.js circle , when im clicking popping out big. easing effects makes charm
circle = paper.circle(1000, 500, 25); circle.click(function() { this.animate({ r: 500 }, 1000,'super_elastic'); });
i use on image. like
<body> <img src="bla.jpg" id="image"/> </body> <script> var image_1 = $('#image') image_1.click(function() { this.animate({ r: 500 }, 1000,'super_elastic'); }); </script>
is possible?
i new raphael, means dont know if works canvas!
thanks help!
please refer sample code. 1st 1 using raphael. , next 1 using jquery.
<!doctype html public "-//w3c//dtd html 4.01 transitieal//en"> <html> <head> <title>test raphael</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type ="text/javascript" src="jquery.min.js" ></script> <script type ="text/javascript" src="raphael.js" ></script> </head> <body> <div id="raphael" style=""></div> <script> var paper = raphael("raphael", 500, 500), image = paper.image('bla.jpg', 0, 0, 100, 100); image.click(function() { this.animate({width: 500, height: 500}, 1000); }); </script> <div style="position:absolute; left:600px; top: 0px"> <img src="bla.jpg" id="image" width="100" height="100"/> </div> <script> var image_1 = $('#image') image_1.click(function() { $(this).animate({ width: 500, height: 500 }, 1000, 'linear'); }); </script> </body> </html>
Comments
Post a Comment