New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Page transitions "out of the box" #15

arvgta opened this Issue Dec 20, 2013 · 4 comments


None yet
2 participants
Copy link

arvgta commented Dec 20, 2013

I would like to implement some basic page transitions "out of the box"

The following transition types are supported by jQuery Mobile:

  • Slide (squeeze implemented instead in order not to break the user's layout)
  • Fade (done in #27)
  • Pop (done in #28)
  • Flip (proposed in #53)
  • Slideup
  • Slidedown

The requirements for a successful implementation are:

  • not too much code
  • supplied "out of the box", as is the spirit of Ajaxify
  • do not break user's layout, i.e. content div effects are self-managing

@arvgta arvgta added enhancement and removed question labels Sep 13, 2014

@arvgta arvgta changed the title Room for new features Page transitions "out of the box" Sep 13, 2014


This comment has been minimized.

Copy link

wikiloops commented Oct 4, 2014

since you had this issue on transitions open already, heres another change suggestion:
In its current state, the implemented "fade" is triggered like this:

user clicks -> page is loaded -> fade takes place -> new content is parsed

I'd sugest to change this to

user clicks -> fade triggered -> page is loaded -> new content is parsed

reason why: if the fade does not take place right away, the user has no visual feedback that his click is being processed. If the response takes a little, a user who is used to the fade taking place will likely click again because nothing is happening.
If the fade takes place right away, the user knows his click has been recognized - in the best of cases, it will look just the same as the current version, if the server response takes a little longer, the user will at least know something is happening and not send addittional requests to your sweating server by clicking again.


This comment has been minimized.

Copy link

arvgta commented Oct 4, 2014

Hey Wikiloops!

Thanks for all three answers!

The easiest bit first - concerning the simple fade effect:

if(fade) $gthis.fadeOut(fade, afterEffect);

... a fadeOut() is initiated right after the user click.

Then the content div(s) is switched.

Then a fadeIn() is performed.

The same order is the case for the "slide/squeeze" effect.

Only in the event of a "pop" effect, it is rendered after the content has been switched...

I'll get to the other issues shortly...

Thanks very much!


This comment has been minimized.

Copy link

arvgta commented Feb 4, 2015

Please let me know, which other transitions "out of the box" would be useful...

Thanks in advance!


This comment has been minimized.

Copy link

arvgta commented Apr 9, 2015

Superseded by #54

@arvgta arvgta closed this Apr 9, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment