javascript - 如何向现有的 jQuery AJAX 单击功能添加加载微调器

Question

我正在尝试让点击功能淡出内容，淡入加载微调器，淡出加载微调器，然后淡入新内容，还可以使用history.pushstate更改我的URL。 除了显示我的微调器之外，上述所有内容均已实现。

jQuery('.jax a, .page-navigation a').live('click', function(event) {
        var url = jQuery(this).attr('href'),
            title = jQuery(this).attr('title');
        jQuery('#main-content').fadeOut('4000', function(){
        jQuery('#main-content').load(url+' #main-content', function(){
        jQuery('#main-content').fadeIn('4000');
        document.title = title;
        history.pushState({url:url,title:title}, title, url );
    });
});
        return false;
});

我的微调器 .spinner 设置为 display:none，但我无法让它与我当前的代码一起工作。任何帮助将不胜感激。

Answer 1

请查看以下代码是否有效:

jQuery('.jax a, .page-navigation a').live('click', function(event) {
    var url = jQuery(this).attr('href'),
    title = jQuery(this).attr('title');
    jQuery('#main-content').fadeOut('4000', function(){
        // Loading will start, show spinner
        jQuery('.spinner').show();
        jQuery('#main-content').load(url+' #main-content', function(){
            // Loading is over, hide spinner
            jQuery('.spinner').hide();
            jQuery('#main-content').fadeIn('4000');
            document.title = title;
            history.pushState({url:url,title:title}, title, url );
        });
    });
    return false;
});