javascript - Raphael js | how to animate with two images -

i making image scroller website,and have 2 pictures. want user click on next button,the image rotate 180 degrees on course of 250 milliseconds,change pictures,and rotate 180 degrees again position on course of 250 milliseconds. there way that?

back.node.onclick=function(){   kitaimage1.animate({ transform : "r180", kitaimage1.hide(); testimg1.show(); testimg1.animate({ transform : "r180"   });  },250);  } 

is have far,but doesnt work. in advance,noam haber

that's absolutely possible, although there lot of ways structure it. here 1 of many possible solutions. assume presence of raphael paper object named paper throughout.

location , dimensions

            var cx = 180, cy = 125; /* these coordinates of center point of image(s) inside paper */             var dx = 320, dy = 240; /* dx , dy describe dimensions of desired image interface. */ 

image information

i'd assume you'd want load information dynamically via ajax (depending on how gallery structured) or able re-use it. example uses array of objects describing url, width, , height of each item in list. instance...

            var imagelist =             [                 {                     url: '/tests/images/sunset1.jpg',                     width: 1600,                     height: 900,                 },                 {                     url: '/tests/images/moonrise1.jpg',                     width: 1024,                     height: 768,                 },                 {                     url: '/tests/images/cityscape.jpg',                     width: 1920,                     height: 1080,                 },                 {                     url: '/tests/images/forest03.jpg',                     width: 500,                     height: 325,                 },             ]; 

the code

last not least, run code when dom ready (or after images have loaded, or whatever other event should trigger it). creates function transition , calls first image place.

            var imageindex = 0;             var rotationmultiplier = 1;             var currentimage = null;              function rotatetransitionnext()             {                 rotationmultiplier *= -1;                 imageindex++;                 if ( imageindex >= imagelist.length )                     imageindex = 0;                  if ( currentimage )                 {                     currentimage.animate( { transform: ["...r", 180 * rotationmultiplier, cx, cy], opacity: 0.0 }, 1000, '<>', function()                         {                             this.remove();                         } );                 }                 var newimage = paper.image( imagelist[imageindex].url, cx - dx / 2, cy - dy / 2, dx, dy )                                     .attr( { transform: [ "r", -180 * rotationmultiplier, cx, cy], opacity: 0.0 } )                                     .animate( { transform: [ "...r", 180 * rotationmultiplier, cx, cy ], opacity: 1.0 }, 1000, '<>', function()                                         {                                             currentimage = this;                                             this.click( rotatetransitionnext );                                         } );             }              rotatetransitionnext(); 

loose ends rough starting point, there few things should done wrap up:

1. for goodness' sake, wrap stuff in own namespace avoid cluttering global scope detritus (my bad)

2. preserve aspect ratios of different images. right now, images being forced conform globally defined dimensions (dx , dy)

happy coding.

update: here staged example of code @ work. click on image cause rotate next.