为 ajax 内容添加淡入淡出效果

Question

我有一个 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。

2.
jQuery('.jax a, .page-navigation a').live('click', function(event) {
            var link = $(this).attr('href');
            jQuery('#main-content').fadeOut('slow', function(){
        jQuery('#main-content').load(link+' #main-content', function(){
            jQuery('#main-content').fadeIn('slow');
        });
    });
            return false;
});

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

Answer 1

我没有适合你的解决方案，但也许这个对别人问题的回答可以帮助你： https://stackoverflow.com/a/1789347/4867333

对load 的调用将使用 AJAX 并将异步运行。您需要在通话终止后立即淡入。您可以通过将回调传递给加载来实现这一点。您的代码将如下所示：

$('#content').load("page1.html", {}, function() { $(this).fadeIn("normal"); }));

更多信息请参见documentation on jQuery's .load()。

---

或者这个：

https://stackoverflow.com/a/9337696/4867333

他能够通过将效果应用于包装器div来实现fadeOut、fadeIn。

---

您可以尝试以下方法：

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