Custom Animations with JqueryJavascript - Stack Overflow

admin管理员组

文章数量:1415672

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 of 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.

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 of 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.

• javascript
• jquery
• animation

Share Improve this question Follow asked Jun 27, 2011 at 12:47 ChaimChaim 2,14144 gold badges2727 silver badges4848 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

If (and only if) you need some custom animations, check out this sweet jQuery plugin: http://weepy.github./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./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./project/AnimateRotation
2. http://plugins.jquery./project/jQueryRotate

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

Rotation
http://code.google./p/jqueryrotate/
http://code.google./p/jqueryrotate/wiki/Examples
This plugin is for images specifically while in CSS3 patible 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 bine it with http://weepy.github./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./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 patible 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./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 pletely free, switch z-score and reverse animation.

本文标签： Custom Animations with JqueryJavascriptStack Overflow