0

I'm creating a web based mobile application and looking for a way to slide between pages.

Currently I have all the pages (which are divs) set to absolute and have them placed exactly on top of each other. Only one page is visible at a time, when the user clicks a button it hides the current page and sets the button targeted page's visibility to true.

I need the page to slide though, like iOS and other mobile platforms do. Using jQuery Mobile is not an option for me (I'm creating a framework myself).

If anyone can advise me on how I can have the pages slide in rather than cut and show immediately I'd appreciate that.

Thanks

jskidd3
  • 4,609
  • 15
  • 63
  • 127
  • have you checked out the `animate` function in jquery? http://api.jquery.com/animate/ you should be able to use that to animate the left border of the `
    `s
     – msturdy Jun 29 '13 at 13:42

1 Answers1

1

You can use css transitions to animate the div's position, e.g.

.page {
    position: absolute;
    transition: left 1s;
    left: 100%;
}
.page.in {
    left: 0
}

See also: http://jsfiddle.net/jkDUm/ It probably doesn't show the exact effect you are looking for but it demonstrates the idea...

ulle
  • 251
  • 1
  • 3
  • Thanks! How would I go about doing this with lots of pages? What should I do to reset them when a new page is clicked etc? Thanks – jskidd3 Jun 29 '13 at 14:08
  • The idea is to have exactly one page with class `in`. To change a page, you would remove that from the current page and add it to the page that should become visible. – ulle Jun 29 '13 at 14:19
  • If you want to do some work after the transition is finished, you can listen for the transition end event. http://stackoverflow.com/questions/2794148/css3-transition-events/2794186#2794186 – ulle Jun 29 '13 at 14:20
  • Thanks mate, appreciate your answer. – jskidd3 Jun 29 '13 at 14:43