Question

我有一个页面，当我点击菜单上的锚标签时，用PHP加载内容，它运行正常。

我一直在努力寻找答案。

我必须使用哪些代码才能从一个内容淡入另一个内容？我在哪里添加此代码？

这是我的代码：

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

Answer 1

你也可以使用它：

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

Answer 2

尝试一下：

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

请注意，300毫秒是默认的淡入淡出时间。如果需要，我改为500，告诉你在哪里做出改变。

单击锚标记时淡入和淡出

2 个答案: