简单的AJAX淡入淡出效果+ Loader +当前类

Question

您好我正在尝试将ajax函数添加到我的网站，它正常使用此代码。只是现在我遇到麻烦得到fadeIn和fadeOut效果和加载动画。

这是我用jQuery编写的脚本代码：

$(document).ready(function() {

    // initial page load
    $('#content-div').load('details/default.html'); 

    // handle menu click
    $('ul#sidenav li a').click(function(){

        var page = $(this).attr('href');        
        $('#content-div').load('details/'+ page +'.html');  
        return false;       
    })

});

这是html标记：

<ul class="square sidebar-list" id="sidenav">
    <li><a href="default">Description</a></li>
    <li><a href="greenhill" class="current">greenhill</a></li>
    <li><a href="introduction">Introduction</a></li>
</ul>
<div id="content-div">                  
    <div id="loading">Loading...</div>
</div>

还想在sidenav中更改当前所选列表项的类

Answer 1

将您的代码更新为：

// handle menu click 
$('ul#sidenav li a').click(function(){
    var page = $(this).attr('href');   
    $(this).removeClass('current');

    $('#content-div').fadeOut(200).load('details/'+ page +'.html', function(){
        $(this).fadeIn(200);
        $('#sidenav a[href='+page+']').addClass('current');
    });  

    return false;       
});

Answer 2

看看，这是你在找什么？

$('ul#sidenav li a').click(function(){
    $('#content-div').fadeOut();
    var page = $(this).attr('href');        
    $('#content-div').load('details/'+ page +'.html', function() {
       $('#content-div').fadeIn();
    });
    return false;       
})