Add fade effect to ajax content

Question

I have a wordpress site where I have ajax content appearing after my loader when a button is clicked. The code works great but I'd like to add in the effect where current content will fade out and new content will fade in, not needing the loader anymore.

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

I've tried multiple variations, such as this below, and it works BUT it doesn't update the address URL along with each post like it does in the first example.

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

Any idea how to add fade to the first example OR add address URL update (History API) with the second example?

I was addressing your "address bar url seems to not update" comment — Steve H., May 20 '15 at 16:22

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I don't have a solution for you, but maybe this answer to someone elses question can help you: https://stackoverflow.com/a/1789347/4867333

The call to load will use AJAX and will be run asynchronously. You'll want to fade in right after the call is terminated. You can achieve that by passing a callback to load. Your code will look like this:

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

See documentation on jQuery's .load() for more information.

Or this one:

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

He was able to achieve the fadeOut, fadeIn by applying the effect to the wrapper div.

You could try the following:

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

the "history.pushState" method does that. See here: https://developer.mozilla.org/de/docs/Web/Guide/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries I had a go at your code, see my edited answer above. I'm definitely not sure, so sorry if it doesn't. — Christopher Stöckl, May 20 '15 at 19:20

Add fade effect to ajax content

1 Answers1