|
Animations
How to use built-in animations and make your own
Featured AnimationsBy default, jQTouch comes with 8 page animations: slide, slideup, dissolve, fade, flip, pop, swap, and cube. The links which cause these animations to occur can be customized via their corresponding initialization options (default values shown below):
How Animations WorkIt is important to note that all animations are handled with CSS3 and classes. Each time the user navigates to a new page, two animations occur: The new page animating in and the old page animating out. The classes which are applied during an animation are:
When the user hits a back button, an additional class of "reverse" is added to both elements. Adding Custom AnimationsAdding your own animations is straight-forward. Just add the corresponding class definitions (using CSS3 keyframe animations), and add the animation with the corresponding public function. Here's an example of adding a custom "reveal" animation, where the new page slides in overtop of the old page. <script>
var jQT = new $.jQTouch();
$(function(){
jQT.addAnimation({
name: 'reveal',
selector: '.revealme'
});
});
</script>
<style>
.reveal.in {
-webkit-animation-name: dontmove;
z-index: 0;
}
.reveal.out {
-webkit-animation-name: revealout;
z-index: 10;
}
.reveal.out.reverse {
z-index: 0;
-webkit-animation-name: dontmove;
}
.reveal.in.reverse {
z-index: 10;
-webkit-animation-name: revealin;
}
@-webkit-keyframes revealin {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes revealout {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}
</style>You will note we're using a built-in animation "dontmove" on pages which are stationary during the transition. This is important, as it means an animation is still technically running on the object (so callback functions still work). Disabling AnimationsPassing 'useAnimations: false' will disable all animations, swapping views instantly -- though still using the same selectors listed above. |
► Sign in to add a comment
If you want to slide in from the left instead of the right (what I called "slideback"), here is the code to add:
<script> $(function(){ jQT.addAnimation({ name: 'slideback', selector: '.slideback' }); }); </script> <style type="text/css" media="screen"> /* Custom Animations */ .slideback.in { -webkit-animation-name: slideinfromleft; } .slideback.out { -webkit-animation-name: slideouttoright; } .slideback.in.reverse { -webkit-animation-name: slideouttoright; } .slideback.out.reverse { -webkit-animation-name: slideinfromleft; } </style>Thanks Josh, great example. I'm also currently working on the ability to just do something like: <a href="#newpage" class="flip reverse"> to automatically use reverse transitions.
I want to load via ajax an html content and then make slideup effect. I'm making in this way, but don't work in iphone, only in firefox Desktop:
<script type="text/javascript"> $(function(){ $('a[href="#clickme"]') .click(function(){ $.get( 'another_page.html', '', function(data){ data = $(data.replace(/[\r\n]/g,'').match(/<body[^>]*>(.*)<\/body>/)[1]); $('div#result-div').html($(data.get(0)).html()); //simulate fake click to active effect $('<a href="#result-div" class="slideup" />').click(); }, 'text' ); this.blur(); return false; }); }); </script>How I need to make to this works in iPhone correctly?
slideSelector: 'body > * > ul li a'
This means that a link will work in an <li> which is in an <ul> which is in some <element> in the body.
This will not work due to two divs:<body><div><div><ul><li><a></a></li></ul></div></div></body>
Solution: Initilize as
var jQT = $.jQTouch({ icon: 'img/icon1.png', statusBar: 'black-translucent', slideSelector: 'body > * > ul li a, .forceSlide' });Hey,
Is there a way to animate away from one HTML page and seemlessly into another?
Hi,
When I click a link at the bottom of a long list of a page to slide to another page, the old page always scrolls up to the page top before sliding to the new page.
Is it possible to stay in the current position of the old page (no more scroll up) before sliding to the new page ??
Thanks
Hey juliovedovatto, To get your code to work, use pageAnimationEnd() instead of click(). E.g.
$('a[href="#clickme"]').bind('pageAnimationEnd',function(e,info)In other words, fire off your AJAX after the page animations are completed, instead of attaching it to the click event.
what is the class of the animation that occurs when the back button is pressed? I want to use it in a pagination script and .back .cancel and .goback doesnt work :S
Can anyone help?
hey rohailaltaf, did you receive an answer to your question? I'm curious as well.
I desperately need a way to animate backwards sliding to a link, not just for pages back in history!
I have tried the custom animation "slideback" code posted above by Joshua S but that does not work for me no matter what I try!
I would love to use something like <a href="#newpage" class="flip reverse"> (as posted by David above) but I need it to point to a page that isn't currently loaded, like href="menu.php" or the java similar href="menu.do"
Please explain how this can be done! Cheers for an excellent platform to build on if these bugs (or lacking features) could be worked out.
The slideback animation CSS has to look like this (going back did not work correctly):
/* Custom Animations */ .slideback.in { -webkit-animation-name: slideinfromleft; } .slideback.out { -webkit-animation-name: slideouttoright; } .slideback.in.reverse { -webkit-animation-name: slideinfromright; } .slideback.out.reverse { -webkit-animation-name: slideouttoleft; }Then use it like this (assuming you added it with addAnimation as shown above):
<ul class="individual"> <li><a class="slideback" href="#animdemo"><<</a></li> <li><a class="slide" href="#animdemo">>></a></li> </ul>Hello. Does anybody know how to remove unpleasant blinks when the animation ".slideback" ends?
I am having a series of <div> with a position:absoloute in their class property, so that they all overlap on each other. I am trying make a book like fee to the user, so that when they swipe from right to left the next page is shown and when they swipe from left to right the page goes back...
For this I am trying to use the swipe.. with out any buttons.. How can I get this swipe to work in these <div>'s on my page... ??? Please
I'm working on a similar problem as Amar and getting a little stuck. I'm able to 'capture' the swipe event on the page but I'm not exactly sure how to tell jQTouch to transition to the next page, and what URL to use. Any clarification/examples on this would be welcome...
At iPhoneOS4.0β , all animations are not smooth....
I have the same problems in 4.0
I have a HTC desire and the animations do not work.
Has anyone got the Animations to work on the Anroid 2.1 browser?
@pstanway - slide animation works fine on my desire. Might be worth double checking you have your selectors set correctly
On an iPad the animations blink when they are finishing. Something wrong :(
@cviedmai- are you using sdk emulator or actual device?
@navin.k.prasad and @amir
You should use multiple DIVs on same html page for this. Faster load, less page requests. Hide all divs and show the next each time a swipe occurs. Great example in the demos- Check out jqtouch<latest>/demos/customanimation2/
@grantsanders I also see blinking when the animations stop when using an actual iPad device.
On iPhone OS 4 Beta 4+, the animations work very smoothly (whereas they did not on earlier Beta releases). I would have no concerns that the final OS 4 will handle the animations fine.
@drdawn I'm also experiencing flashing (blinking) on 2 iPads. Any update's?
working on the Androids 1.5 - 2.1 using the slideback transition.
Both hard devices and emulators blink after a page load. what I mean by blink is after the new page loads, the previous page shows up on the screen for a split second before disappearing.
Also have problems with navigation, if I click the same link twice, it complete messes up the page load.
--in Start page -- <a class="menubutton" href="#">Start Page</a> <a class="menubutton in" href="#nextPage">Next Page</a>
--in Start page -- <a class="menubutton in" href="#nextPage">Start Page</a> <a class="menubutton" href="#">Next Page</a>
If I navigate to the "Next Page", and click the "Next Page" button again, it blinks a few of my pages and puts me back to "Start Page".
Am I doing something wrong with my links or can someone point me in the right direction? Or is it because like most other Web UI, this is directed mainly at the Apple devices?
how to use function animatePages(fromPage, toPage, animation, backwards)
i have solved the blinking problem with a little help from z-index
what comes in gets a 10, what goes out gets a 0
like this:
.slide-back.in {
}.slide-back.out {
}.slide-back.in.reverse {
}.slide-back.out.reverse {
}@-webkit-keyframes slideinfromright {
}@-webkit-keyframes slideinfromleft {
}@-webkit-keyframes slideouttoleft {
}@-webkit-keyframes slideouttoright {
}@buchtblog are you changing this in the jqtouch.css? coz it seems the exisiting -webkit-keyframes already have those values.
@buchtblog: your solution seems to work great. But I'm still having the blink problem with slideup on my Htc desire. I tried to play a little with the z-index but no go.. I'm wondering is this a bug in jqtouch or maybe webkit is not rendering it correctly?
Compliments for jtouch!
In slide animations i want to create a photogallery with slide from next button. Now...how i can change back button in next button? ( i'have tried with modify to css but always return on animations page)
thanks
@ carbon caleb no, i've put the z-indexes in the css i made for the page, since the slide-back animation is not between the original stuff. i've seen some z-indexes in jqtouch.css but they seem to be used differently.
@edziohtc i'm sorry, cannot help you with that. only logic says: what comes in must lie above what goes out.
@buchtblog: it works in case of slideup, but not with reverse :) I tried to put z-index in every known combination and still the blink is visible.. but only in reverse (?!)
@i...@dglab.it - "how to make a next button": see the comment above from "lord.loh, Nov 18, 2009" and the use of a .forceSlide class - worked for me.
I think the flash at the end of animation that some people are seeing is because the page they are transitioning have a transparent background (all of the jQTouch example pages have solid backgrounds).
Elements that are animated with webkit-animation will snap back to their starting position after the animation concludes -so the element is transitioned off the screen, then snaps back to it's original position (on screen) then the "current" class is removed by jQtouch - which hides it, causing a "flash".
I can't see a way to force webkit-animation to not return to the start... anyone know how?!
Do any body know how to make pagination work in jqtouch ?? if anybody have code please help
I have also the problem of flashing at animations @cviedmai and the solution of @buchtblog won't work :(
But I noticed, if the target div bigger than the ipad, there is no flashing. So somebody knows how to set all divs to the full size, even if their content are not enough?
Thanks for helping.
Well, after months or working with JQtouch and endless nights, I was able to make it look, feel and behave flawlessly...including perfect-smooth scrolling and fast response times. Got rid of even the slightest glitches. My apps are super-heavy with truly huge data arrays, a lot of hi-res images and a LOT of Ajax. Imagine main html file over 1MB before loading data? It was super hard to make this work at all, not to say to work like a dream. My main advice for those who are looking for better, faster response times and smooth performance: have everything inline, no external css or JS all frameworks must be in the parent. Even Jquery has to be internally run. All buttons, images, etc, must be in the same directory. There are a few tricks how to make scrolling jitter-free and smooth like a dream as well!:) P.S I also had to slightly rewrite some core JQtouch functions.
Hi parisfelinni Do you have a example? Im interesting in "tricks how to make scrolling jitter-free and smooth like a dream", since scrolling long lists is not smoot at all for me.
For people who have a blinking problem, maybe this can help you. I have a button on my homepage that animates another page in using a slideup. When I tap that button, the homepage blinks to black before the other page comes in. I use the jqt theme, on an ipod touch with iOS 3.1. After some tests, I figured this is because the size of the div that comes in is longer than the screen. So I resolved it with this function, call it in your onready/$ function:
var fixPageBlinks=function() { $("div[id=\"jqt\"] > div").each(function() { var el=$(this); //console.log("fix blink for page "+el.attr("id")); el.bind('pageAnimationStart', function(e, info){ el.css("height","480px"); }). bind('pageAnimationEnd', function(e, info){ el.css("height","auto"); }); }); }Now I can see a small color change in the backgrounds during animation but it's not that bad.
Blink problem solved! Here's the recipe:
- open jqtouch.js (if you're using jqtouch.min.js, must change it to this modified jqtouch.js)
- goto line 345 (scrollTo(0, 0);) and after that add: // mod1 var toStart = 'translateX(' + (backwards ? '-' : '') + window.innerWidth + 'px)'; fromPage.css( 'webkitTransform', toStart ); // end mod1
- then goto line 350 (was 348 before mod1, just after var callback = function(event){ ) and add: // mod2 fromPage.css( 'webkitTransform', ''); // end mod2
Done, that's all!
It could be interesting to use these animations between two HTML pages... Someone knows if it already exists ? Or need to be developed ?
Beny
To those who want to animate between two separate web pages, try this in your <body>:
Replace the src with the file name of the second page and also "page1" with any other name. Then add this to your <head>:
<style type="text/css">div>iframe{width:100%;height:100%;margin:0;padding:0;border-width:0;}</style>Load the page, tap the link and the external page will slide in. Enjoy!
it is possible to have iPhone like flipping between 2 different activities in android. Can you please post the required code
sunke.pr...@gmail.com The "swap" animation is similar to the iPhone's animation between two apps. Here is some code you can use to test it:
Is it possible to animate a part of the page and keep the same toolbar? For example to load a new content to a <div class="info" id="datafield"> using AJAX when a button is pressed in the toolbar?
How I can implement something like twitter app does. When we swipe on tweet it slides with the options icons.
I'm using iFrame like addymasi suggested (I'm using swiping to change pages). The transition to another is quite smooth. But the iFrame is not arranged very well, I guess this could be fixed by adjust css. The main problem is the swipe (or touch) is not captured inside this iFrame. I can't use swipe to move back to my previous page any more. Any suggestion?
I have to create a functionality in which i have to slide up only a portion of the page. e.g if user has opened any page and he has got any new message then whatever page he has opened, a new bubble with the message text will appear with slide in animation.
I am able to append the HTML in the current opened page but not able to do it with animation as animate will slide out the full page.
Any ideas on how i can do this? Thanks in advance.
Is there a way to navigation from page to page with animations without using an iframe? This seems like a glaring oversight in how jqtouch works. Wouldn't it be fairly normal that someone would want to load up dynamic pages of a site without calling on-page divs?
@danielda...@gmail.com You can load a page via Ajax instead, however, the page we load must have a back button otherwise the user can't go back to the previous page. In the first page:
<script> $(function(){ $("#page2").load("/path/to/another/page.html #page2"); }); </script>Change "page2" above with the id you want for the page, and /path/to/another/page.html with an absolute or relative limk to the page you want to load. Then create another page with jQuery and jQTouch and add a div in the body that has the id you chose above. Ad@m
How might I implement this if I just want to load options for one item on a list? A common iphone UI element is tapping or sliding to reveal other options beneath a list item (twitter's app does this, for example.)
i think blinking has smthing to do with 1024x1024 UIview limitation .. see http://stackoverflow.com/questions/273067/iphone-sdk-uiwebview-has-a-grey-box-over-it
Can anyone please help me? I am using the following code to open another page but when you click it shows a blank page instead of the page I am trying to open.
<html> <head> <title>This is a test app</title> <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> <link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css"> <script type="text/javascript" src="jqtouch/jquery.js"></script> <script type="text/javascript" src="jqtouch/jqtouch.js"></script> <script type="text/javascript">
</script> </html>arttreee www.arttreee.com its good for web designing.....