Javascript 向ajax内容添加淡入淡出效果

我有一个wordpress网站，当点击按钮时，我的加载程序后面会出现ajax内容。代码工作得很好，但我想添加一个效果，当前内容将淡出，新内容将淡入，不再需要加载程序

1.    
jQuery(document).ready(function() {
        jQuery('#main-content').on('click', '.jax a, .page-navigation a', function(e) {
            e.preventDefault();
            var url = jQuery(this).attr('href'),
                title = jQuery(this).attr('title')
            ;
            jQuery('#main-content').html('<img id="loader" alt="loading" width="43" height="11" src="<?php echo get_template_directory_uri(); ?>/library/images/squares.gif"/ >').load(url+ ' #main-content');
            document.title = title;
            history.pushState({url:url,title:title}, title, url );
          });
        });

window.onpopstate = function(event) {
    document.title = event.state.title;
    jQuery('#main-content').html('<img id="loader" alt="loading" width="43" height="11" src="<?php echo get_template_directory_uri(); ?>/library/images/squares.gif"/ >').load(event.state.url+ ' #main-content');
}

---

你知道如何在第一个示例中添加淡入淡出，或者在第二个示例中添加地址URL更新（历史API）吗？

我没有解决方案，但也许这个对其他人问题的回答可以帮助你：

对

load

的调用将使用AJAX，并将异步运行。你会想在通话结束后立即淡入。您可以通过向load传递回调来实现这一点。您的代码如下所示：

$（'#content'）.load（“page1.html”，{}，function（）{$（this.fadeIn（“normal”）；}）

有关更多信息，请参阅


或者这个：


他能够通过对包装器div应用效果来实现淡出，淡出


您可以尝试以下方法：

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('slow', function(){
    jQuery('#main-content').load(url+' #main-content', function(){
        jQuery('#main-content').fadeIn('slow');
        document.title = title;
        history.pushState({url:url,title:title}, title, url );
    });
});
        return false;
});

尝试取出
e.preventDefault（）这不会增加淡入淡出效果。我是在处理你的“地址栏url似乎不更新”注释，而“history.pushState”方法就是这样做的。请看这里：我尝试了一下你的代码，请看上面我编辑的答案。我肯定不确定，如果不确定，很抱歉。
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('slow', function(){
    jQuery('#main-content').load(url+' #main-content', function(){
        jQuery('#main-content').fadeIn('slow');
        document.title = title;
        history.pushState({url:url,title:title}, title, url );
    });
});
        return false;
});