CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jskidd3
jskidd3

Reputation: 4783

Use JavaScript to have pages slide in?

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

Upvotes: 0

Views: 86

Answers (1)

ulle
ulle

Reputation: 251

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

Upvotes: 1

Related Questions