As you can see my last post didn't attract the community but I managed to get that animation on iPhone working via CSS3 transitions pretty great.
I normalized my code to use CSS3 animations now. This is little better than what I saw using JavaScript. But still the animation lags on the device. I have many DIVs inside <body> and only one at a time would be visible and all other are hidden.
If you look at this picture, these are 4 DIVs but the second DIV is being currently shown on the device. Now I want you to please write me some code to understand how can I apply movement of DIVs along x-axis as only one would be shown?
UPDATED
The code I have right now is...
function slideLeftTo(to, after) {
var page = $(to);
var current = $(".current");
if (page.length < 1) return;
if (current.length < 1) return;
if (page.attr("id") == current.attr("id")) return;
var endX = current.width();
page.css({ top: "0px", left: endX + "px", display: "block" });
current.css({ top: "0px", left: "0px", display: "block" });
setTimeout(function() {
current.css("left", -endX + "px");
page.css("left", "0px");
}, 50);
setTimeout(after, 850);
}
function slideRightTo(to, after) {
var page = $(to);
var current = $(".current");
if (page.length < 1) return;
if (current.length < 1) return;
if (page.attr("id") == current.attr("id")) return;
var endX = current.width();
page.css({ top: "0px", left: -endX + "px", display: "block" });
setTimeout(function() {
current.css("left", endX + "px");
page.css("left", "0px");
}, 50);
setTimeout(after, 850);
}
