Fade in/out dynamically included content

Question

I have website that uses PHP to dynamically include content of the site. The PHP looks like this:

<div id="content">
        <?php
        $content = $_GET['content'];
        $pages = array('forside', 'menukort', 'hvemervi', 'Kontakt', 'catering');
            if (!empty($content)) {
                if(in_array($content, $pages)) {
                $content .= '.php';
                include($content);
            } else {
                    echo'Siden kunne ikke findes. Der må være sket en fejl! Gå tilbage til <a href="index.php">forsiden</a>';
                }

            } else {
                   include('forside.php');
            }   
        ?>
</div>

TRying some Jquery

$(document).ready(function() { $('#menu-bar 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('slow', function() {

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

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

});​​​​ What should i do to fade in/out the content of the side when when $content is include?

Answer 1

The HTML of your page is being written synchronously by PHP. If you want to fade in particular chunks of content when they become available, you'll want to deliver the frame of your page, and then use JS and AJAX on the front end to load content at runtime and fade it in.

Edit After JS was Provided

The PHP that you have provided has an extra else statement and unpaired curly braces. Perhaps it is erroring and that is why your JS is not pulling the content properly. However, your basic approach seems sound.

I should note, also, that running include() on user provided data seems like a pretty big security hole.