Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #169015
    Anonymous
    Inactive

    Ive been working with AJAX Jquery lately and ive been able to load pages onto a container real easily. Although i want to add effects when switching pages. To make this as easy as possible i want to create a fade effect when switching. So the current page fades out, while the next page fades in. How can i do something like this? Here is the ajax i have.

    $(document).ready(function() {
    
        $("#pages-load-area #pages-container").load("./pages/" + initialPage);
    
        $("#header-navigation a").on("click", function() {
    
            var urlPageName = $(this).attr("href");
    
            $.ajax({
                type: "GET",
                url: "./pages/" + urlPageName,
                processData: false,
                crossDomain: true,
                cache: false,
                success: function (result, responseData) { $("#pages-load-area #pages-container").html(result); },
                error: function (responseData, textStatus, errorThrown) { alert('AJAX failed'); },
            });
    
            return false;
    
        }); 
    
    });
    
    #169021
    Chromawoods
    Participant

    Something like this? (might be a bit sloppy, but hopefully you get the idea)..
    http://codepen.io/chromawoods/pen/nywfc

    The trick here is to use a callback function for jQuery’s fadeOut function, which fires after the animation is done. So basically, first fadeOut the content. Then, fetch the new content and fadeIn. You could also add a loading animation between the first content has faded out and the new content begins to fade in.

    #169109
    Anonymous
    Inactive

    Thanks although how would i implement that into the AJAX code i have? It’s still a little confusing.

    #169222
    Chromawoods
    Participant

    The load() function does exactly what you want; you don’t need the $.ajax() function at all. You basically just need to exchange the selectors in my code with the ones you want to use.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.