Question

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.

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?

Many thanks

Code:

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

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

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>

The content is selected from a nav bar:

<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

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

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 for navbar:

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

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();
                });
            }
        });
    });
});​​​​

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.