IPhone Slide Effect

By mike@mike-miles.com

One of the cool (in my opinion) stand-out effects of the iphone is the way in which it switches between windows within the same application. The windows slide to the left when going forward), and slide to the right when going back.  This was an effect I wanted to emulate with my Iphone app Points Watcher .

Since my application is web based,  I needed to come up with  a solution that fits my needs.  What I wanted to happen is the user preforms an action (presses a button), it causes a page load (via AJAX) to occur. The results are then loaded into the page and slide in.

To accomplish this I relied on the jquery animate effect;

The animate effect allows you to … well create your own animations. So I decided to apply this effect to my main content DIV when triggering a page load.

This is what happens:  user clicks a button, which will trigger a page load. Using AJAX, I retrieve the new content for the page.  When the content is loaded succesfully I take the main DIV and  change its position 500px to the right (out of the scope of the Iphone browser screen).  I then load the new content into the DIV and using the animate effect slide it to the left 500px (Back to its original position)

Here’s a simple example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//A simple example of Replecating the IPhone slide in effect
function loadPage(page){
	//Using an AJAX call, retrieve the new content to be placed in the DIV
	$('#content').load('',{Page:page},function(){
		//On successful loading of the content
		//Set the DIV's position to relative (to allow for moving it)
		$(this).css('position','relative');
		//Move the DIV to the right 400px
		$(this).css('left',400);
		//Now animate the DIV to move back to the Left 400px
		//Back to its original position
		$(this).animate({left:0},'fast','linear',function(){
			//On completion of the animation set the DIV back to static
			$(this).css('position','static');
		});
	});
}

The effect comes off really well. It functions nearly perfectly to the actual IPhone effect and looks great.

All it takes is a bit more modification to allow for traversing back.  Just needed to throw in a conditional that if we’re going back instead of moving the DIV 400px to the right, we move it to the left (essentially off of the page).  That then cause it to slide in towards the right.

Here’s the modified code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//A simple example of Replecating the IPhone slide in effect
function loadPage(page,back){
	//Using an AJAX call, retrieve the new content to be placed in the DIV
	$('#content').load('',{Page:page},function(){
		//On successful loading of the content
		//Set the DIV's position to relative (to allow for moving it)
		$(this).css('position','relative');
		//Move the DIV to the right 400px
		//Unless We're going back to a page, then move DIV to the left -400px (So it'll slide to the right)
		$(this).css('left',(back ? -400:400));
		//Now animate the DIV to move back to the Left 400px
		//Back to its original position
		$(this).animate({left:0},'fast','linear',function(){
			//On completion of the animation set the DIV back to static
			$(this).css('position','static');
		});
	});
}

Here is an example page, feel free to look at the source code and adapt it for your own needs.