使用PHP Includes和静态导航栏时淡入淡出转换


Fade Transition when using PHP Includes and static navbar

我想实现页面之间的转换,就像这里我尝试过这个解决方案,但它对我的不起作用

我的index.php:

<?php include_once("header.php") ?> 
<?php include_once("main.php") ?>   
<?php include_once("footer.php") ?> 

在header.php中,我有导航栏

<div id="menu">
    <ul class="nav text-center">
         <li<?php if($file == 'index.php'){ ?> id="button" class="active" <?php }?>><a href="/test2" title=""><i style="color:#fafafa" class="fa fa-home fa-2x"></i></a></li>
         <li<?php if($file == 'onas.php'){ ?> id="button" class="" <?php }?>><a href="onas" title="O nas"><i style="color:#fafafa"  class="fa fa-child fa-2x" ></i></a></li>
         <li<?php if($file == 'sklepy.php'){ ?> id="button" class="" <?php }?>><a href="sklepy" title=""><i style="color:#fafafa"  class="fa fa-shopping-cart fa-2x" ></i></a></li>
         <li<?php if($file == 'kontakt.php'){ ?> id="button" class="" <?php }?>><a href="kontakt" title="Kontakt"><i style="color:#fafafa"  class="fa fa-envelope-o fa-2x" ></i></a></li>   
         <li<?php if($file == 'uslugi.php'){ ?> id="button" class="" <?php }?>><a href="uslugi" title=""><i style="color:#fafafa"  class="fa fa-cog fa-spin fa-2x" ></i></a></li>   
    </ul>  
</div>

我想加载的示例页面如下:

<?php include_once("header.php") ?> 
<div style="color:#fafafa; background-color:#1D1A21">
<div class="container" id="uslugi">
 xyx
</div>
</div>
<?php include_once("footer.php") ?> 

这是我的页面:样本

我该如何实现这个动画?有什么例子、教程吗?

您需要ajax来实现它像这样的

$('.scrollableArea a').on('click', function(e) {
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    $.ajax({
        url: url,
        success: function(data) {        
            $('#navlist').fadeOut(function() {
                $(this).html(data); 
                $(this).fadeIn();
            });
        }
    });
});