使用 PHP Includes 时的淡入淡出过渡

Question

我正在尝试在 DIV 中包含的 php 页面上使用 jQuery 或 CSS（或其他方式！）创建淡入淡出或滑动过渡。我四处搜索，发现了大量的淡入淡出转换的例子，它们使 div 相互淡化或淡入隐藏的内容，但这种情况略有不同。

我有一个 DIV，其内容由导航栏控制。选择时，每个页面都使用 PHP 成功包含在 div 中，但我想让内容淡入淡出。

关于如何在页面更改之间进行漂亮的过渡有什么想法吗？

非常感谢

代码：

<?php
    if (isset($_GET['page']))
    $page = $_GET['page'];

    else {
            $_GET['page'] = 1;
            $page = $_GET['page'];
}
?>

然后页面被包含在一个 div 中，如下所示：

<div id="content">
      <?php switch($page)
    {       
            case "about":
            include('includes/about.php');
            break;

            case "portfolio":
            include('includes/portfolio.php');
            break;

            case "contact":
            include('includes/contact.php');
            break;

            default:
                include('includes/home.php');
            }
?>
    </div>

从导航栏中选择内容：

<ul>
  <li><a href="m_index.php?page=home"><img src="" width="32" height="32" alt="Home"/></a></li>
  <li><a href="m_index.php?page=about"><img src="" width="32" height="32" alt="About" /></a></li>
  <li><a href="m_index.php?page=portfolio"><img src="" width="32" height="32" alt="Portfolio" /></a></li>
  <li><a href="m_index.php?page=contact"><img src="" width="32" height="32" alt="Contact Us" /></a></li>
</ul>

Answer 1

就像人们在 cmets 中所说的那样，您每次都在重新加载整个页面。

您可以使用jQuery.load API 来加载内容，而不是将它们包含在 php 中。

PHP：

<div id="content">
    <?php
    // load home by default - the rest will be loaded via AJAX
    include("includes/home.php");  ?>
</div>​

导航栏的 HTML：

<ul id="links">
    <li><a href="m_index.php?page=home"><img src="" width="32" height="32" alt="Home"/></a></li>
    <li><a href="includes/about.php"><img src="" width="32" height="32" alt="About" /></a></li>
    <li><a href="includes/portfolio.php"><img src="" width="32" height="32" alt="Portfolio" /></a></li>
    <li><a href="includes/contact.php"><img src="" width="32" height="32" alt="Contact Us" /></a></li>
</ul>
​
​

使用 jQuery，你可以这样做：

$(document).ready(function() {
    $('#links a').click(function(e) {
        e.preventDefault(); // we'll get the pages via ajax.

        var url = $(this).attr('href'); // use href as url to loag

        $.ajax({
            url: url,
            success: function(data) {

                // when ajax is done, fade old content out
                $('#content').fadeOut(function() {

                    $(this).html(data); // replace contents

                    // fade new content in
                    $(this).fadeIn();
                });
            }
        });
    });
});​​​​

我还没有测试过 jQuery 代码，但它应该可以工作（或者给你一些想法）。 如果一切顺利，您可能还想清理 php 代码。