CODEWITHSUNDEEP
jqueryajax
Melros
Melros

Reputation: 1213

Ajax: fade in new content only if its fully loaded

I don't know if this technique is wrong but I really only want the new content to be faded in when it's full loaded. It seems like beforeSend and complete send has no effect in timing. The new content will just fade in even before the slide up has happened,f.e..

I'm not yet quite familiar with ajax you must know.

Here is my code:

$(function(){
    var replacePage = function(url) {

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            beforeSend: function() {    
                $(".menue").slideUp();
            },
            success: function(data){
                var dom = $(data);
                var html = dom.filter('#content').html();

                $('#content').html(html);

            },
            complete: function(){
                $("#content").fadeIn(); 
            }
        });
    }

    $('nav a').live('click', function(e){
        history.pushState(null, null, this.href);   
        replacePage(this.href);
        e.preventDefault();
    $("#content").hide();
    });

    $(window).bind('popstate', function(){
        replacePage(location.pathname);
    });
});

Upvotes: 3

Views: 3026

Answers (2)

Ram
Ram

Reputation: 144729

Try the following: 

success: function(data){
           var dom = $(data);
           var html = dom.filter('#content').html();
           $(".menue").promise().done(function(){
                $('#content').html(html).fadeIn()
           })
        },

or you can use slideUp()'s callback function which executes after animation is complete:

$(".menue").slideUp('slow', function(){
    $.ajax({
        url: url,
        type: 'get',
        dataType: 'html',
        success: function(data){
            var dom = $(data);
            var html = dom.filter('#content').html();
            $('#content').html(html).fadeIn()
        }
    });
 })

note that live() is deprecated and you can use on() method instead.

Upvotes: 3

j08691
j08691

Reputation: 208012

Change the success function in your ajax call to:

success: function(data){
                var dom = $(data);
                var html = dom.filter('#content').html();
                $('#content').html(html).hide().fadeIn();
            },

Remember to remove the fadeIn() from the complete call.

Upvotes: 1

Related Questions