Custom Animations with Jquery/Javascript

Forgive me if this is not the best forum to ask this question in. I'm not sure where to start, so maybe someone here can direct me.

Using html and jquery/javascript, I want an animation o开发者_如何学Gof one item flipping over another item. Almost as if someone is taking a page out from a file and replacing it on top of another page in the file.

Please see attached picture for referance.

If (and only if) you need some custom animations, check out this sweet jQuery plugin: http://weepy.github.com/jquery.path/

It should get you going in the right direction. Your general approach:

1. Create a path that swings Box2 into position in step 4.
2. Change z-index of Box2 to be on top of Box1.
3. Animate Box2 back along the same path in the opposite direction.

Addition: here's a good ReadMe for creating your path: https://github.com/weepy/jquery.path/blob/master/README.markdown

Addtion #2: It was asked how to do rotation, so I dug up a couple plugins to do that:

1. http://plugins.jquery.com/project/AnimateRotation
2. http://plugins.jquery.com/project/jQueryRotate

If anyone has experience with either of these (I don't) leave a comment below for the OP!

Rotation
http://code.google.com/p/jqueryrotate/
http://code.google.com/p/jqueryrotate/wiki/Examples
This plugin is for images specifically while in CSS3 compatible browser other elements will work in older browsers and IE: don't expect other elements to work.

Example:

$myContainer = $('selector');
$myContainer.rotate({animateTo:45}).animate({'left':100,'top':-100}, function(){
    $myContainer.css('z-index', 2).rotate({animateTo:0}).animate({'left':0,'top':0});
});

Maybe try to combine it with http://weepy.github.com/jquery.path/ (credit to Adam Terlson for posting it) for smooth path animation. Looks like a great plugin.

In my experience rotating in IE is always glitchy.

I adopted couple scripts a while back into something that worked best for me: http://pastebin.com/kDK9mu9W however I did this for a project of mine and never test it outside and it does not have animation - you would need to use a interval. IE7, IE8 & CSS3 compatible browser support for all elements. Images are wrapped in divs to prevent filter conflicts.

Is this a question? You certainly could use jquery to do this and there are already some plugins that offer something similar. See the shuffle type animation of jCycle

http://jquery.malsup.com/cycle/

I'm sure you could take a look at the code there to get some pointers on how to proceed.

There's an excellent tutorial here that explains the basics of sprite animation with jQuery. It's not a solution for your specific question, but it offers a quick introduction to the concepts you'll need.

Have two divs with appropriate Z-scores. Animate div to slide top right, as soon as div is completely free, switch z-score and reverse animation.