Question

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?

Answer 1

Your question inspired me to code this up in Agile Toolkit:

http://codepad.agiletoolkit.org/layoutswitch