Add fade effect to ajax content

0 Views

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.

Read More
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?

Post Views: 0

Related posts

1 comment

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

Comments are closed.