I am looking to make a nice transition effect for a dynamic user layout system I have created.
My layout relies on a session being either the value of 1 or 2, I then call the layout using a switch statement.
switch ($ _SESSION['layout']) {
case 1: break;
case 2: break;
}
I have also created a button that they can click to change the layout using ajax. The jquery for this is like so:
$ ('#changeLayout').click(function() {
$ .ajax({data: {changeLayout: 'mainLayout'}});
$ ('#fluidWrap').fadeOut();
setTimeout(function() {
window.location = 'http://www.example.com/preferences';
}, 1000);
return false;
});
The ajax is as follows:
if ($ _SESSION['layout'] == 1) {
$ q = $ dbc -> prepare("UPDATE layout SET layout = 2 WHERE id = ?");
$ q -> execute(array($ _SESSION['id']));
$ _SESSION['layout'] = '2';
}
else {
$ q = $ dbc -> prepare("UPDATE layout SET layout = 1 WHERE id = ?");
$ q -> execute(array($ _SESSION['id']));
$ _SESSION['layout'] = '1';
}
Now at the minute when the user clicks the button to change the layout the div #fluidWrap fades out, the ajax request has 1 second to change the session data and add it to the database, and the page reloads. All works well.
I was wondering how I can improve on this to maybe make a transition effect where the page slides out and slides back in again, how would I go about doing this?
I can’t add an effect with jquery for the div #fluidWrap to fade in, as on every load of the page it will of course fade in. How can I tell jquery to only fade in the body if the button was clicked after a page load?