使用PHP包含时淡入过渡 [英] Fade Transition when using PHP Includes

问题描述

我正在尝试使用jQuery或CSS（或其他方式！）创建一个淡入淡出或幻灯片过渡，这些过滤器位于DIV中。我已经四处寻找并发现了许多渐变过渡的例子，这些过渡会使div彼此淡化或淡入隐藏内容，但这种情况略有不同。

I'm trying to create a fade or slide transition using jQuery or CSS (or otherwise!) on php included pages which sit within a DIV. I've searched around and found loads of examples of fade transitions which fade divs with one another or fade in hidden content but this situation is slightly different.

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

I have one DIV whose content is controlled by the nav bar. Each page is successfully included within the div using PHP when it is selected but I'm wanting to make the content fade in and out.

关于如何制作一个内容的任何想法页面更改之间看起来很漂亮？

Any ideas on how to make a nice looking transition between page changes?

非常感谢

代码：

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

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

然后这些页面包含在div中，如下所示：

and then the pages are included in a div like so:

<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>

推荐答案

就像人们在评论中说的那样，你正在重装每次都是整个页面。

Like people said in the comments, you're reloading the whole page everytime.

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

You can use jQuery.load API to load the content instead of including them in 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，你可以这样做：

With jQuery, you do something like this:

$(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代码。

I haven't tested the jQuery code, but it should work (or give you some ideas). You might want to clean up the php code also, if all goes well.

这篇关于使用PHP包含时淡入过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！