Question

我希望为我创建的动态用户布局系统提供一个很好的过渡效果。

我的布局依赖于值为1或2的会话，然后我使用switch语句调用布局。

switch ($_SESSION['layout']) {

    case 1: break;
    case 2: break;
}

我还创建了一个按钮，他们可以单击以使用ajax更改布局。 jquery就是这样：

$('#changeLayout').click(function() {

    $.ajax({data: {changeLayout: 'mainLayout'}});
    $('#fluidWrap').fadeOut();
    setTimeout(function() {
        window.location = 'http://www.example.com/preferences';
    }, 1000);
return false;
});

ajax如下：

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';
}

现在，当用户单击按钮更改布局时，div #fluidWrap淡出，ajax请求有1秒钟更改会话数据并将其添加到数据库，页面重新加载。一切顺利。

我想知道如何改进这一点，以便在页面滑出并再次滑入时进行过渡效果，我将如何进行此操作？

我无法使用jquery为div #fluidWrap添加效果淡入，因为在页面的每个负载上它当然会淡入。如果按钮是，我怎么能告诉jquery只在身体中淡入页面加载后点击了什么？

Answer 1

你的问题激励我在Agile Toolkit中编写代码：

http://codepad.agiletoolkit.org/layoutswitch

Answer 2

此代码不执行任何操作，您只需将其删除即可：

switch ($_SESSION['layout']) {

    case 1: break;
    case 2: break;
}

此代码重复：

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';
}

您可以轻松缩减为：

$_SESSION['layout'] = 3 - min(2, max(1, $_SESSION['layout']));
$q = $dbc -> prepare("UPDATE layout SET layout = ? WHERE id = ?");
$q -> execute(array($_SESSION['layout'], $_SESSION['id']));

如果您发现代码看起来重复，请不要重复，请减少它。这使您的工作更轻松，而且您只需要修复一次错误。

使用jquery转换本身我不是那么流利，但是我会在ajax成功事件函数上重定向而不是窗口超时。那么即使您的ajax请求需要20秒，用户也不会在一秒钟之后被误导。

要淡出整个网站，您可能希望隐藏<html>或<body>代码。

使用jquery，php会话和页面刷新获得良好的过渡效果？

2 个答案: