单击锚标记时淡入和淡出

I have a page which loads content with php when clicking on the anchor tags on my menu and it works fine.

I have been trying to find the answer for days now.

Which code do I have to use to fade from one content to another? and where exactly do I add this code?

Here is my code:

$(document).ready(function() {
    // Set trigger and container variables
    var trigger = $('#centerMenu div a'),
        container = $('#content');

    // Fire on click
    trigger.on('click', function() {
        // Set $this for re-use. Set target from data attribute
        var $this = $(this),
            target = $this.data('target');

        // Load target page into container
        container.load(target + '.php');

        // Stop normal link behavior
        return false;
    });
});

Give this a try:

$(document).ready(function(){
    var trigger = $('#centerMenu div a'),
    container = $('#content');

    trigger.on('click', function(e){
        e.preventDefault();
        var $this = $(this),
        target = $this.data('target');
        container.fadeOut(500,function(){
            container.load(target + '.php', function(){
                container.fadeIn(500);
            });
        });
    });
});

Note that 300ms is default fade time. I changed to 500 to show you where to make that change, if desired.

Also you can use this:

$(document).ready(function() {
        // Set trigger and container variables
        var trigger = $('#centerMenu div a'),
            container = $('#content');

        // Fire on click
        trigger.on('click', function() {
            // Set $this for re-use. Set target from data attribute
            var $this = $(this),
                target = $this.data('target');

            // Load target page into container
            container.fadeOut(250);
            container.load(target + '.php').fadeIn(500);

            // Stop normal link behavior
            return false;
        });
    });