CODEWITHSUNDEEP
jqueryjquery-mobiletransitionflip
Joseph Wer
Joseph Wer

Reputation: 361

jQuery Mobile - applying transition effects for individual dom elements

I'm looking to accomplish something like this using jQuery Mobile (and ideally, no additional plugins): http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.php

I can make it work with only one element using pages and "data-rel=dialog".. but it gets quite complicated with multiple items.

I was wondering if there is a way to just call the "flip" transition without using the data-role=page attribute. In other words, just flip any ordinary div.

Is something like this possible?

Upvotes: 1

Views: 5597

Answers (2)

Tigertron
Tigertron

Reputation: 638

To add the flip animation to an element, just add the flip class to it. You can apply any effect to any element, take a look at the css file for more effects.

$(element).addClass("flip"); // to flip it
$(element).removeClass("flip"); // after the animation is complete

Upvotes: 0

Joe Bedurndurn
Joe Bedurndurn

Reputation: 186

So you just want an element on one of your pages that you can flip like the individual logos on the flip wall? You absolutely can do that. Those (presuming here, since I haven't looked at it in detail) are CSS animations. They aren't supported in all browsers though (primarily just webkit-based ones, but that's your major mobile, Mac and enthusiast PC crowd).

Check out this article from The Art of Web:

http://www.the-art-of-web.com/css/3d-transforms/

That should get you on the road to where you want to be.

Upvotes: 1

Related Questions