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

Question

我正在尝试使用 jQuery 或 CSS(或其他方式!)在 DIV 内的 php 包含页面上创建淡入淡出或幻灯片过渡。我四处搜索并发现了大量淡入淡出过渡的示例，这些示例使 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

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

您可以使用 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 代码。