Question

I am attempting to add a class to an element contained within an Ajax-loaded page prior to it being displayed in the browser in jQuery. Here is my code:

$("#landing li.nav4 a").live('click', function() {
    $("#landing").fadeOut('slow', function(){
        $('#agency').load('assets/ajax/agency.html').fadeIn(function(){
            $("#agency-main nav li.nav1 a").addClass("nav1-on");
        });
    });
    return false;
});

What happens at the moment is the page is loaded, and then the class is added and there is a noticeable “flash” as the class (background image) is loaded.

Any ideas how to load the content, add the class, and then fadeIn, in that order?

Answer 1

I’m a jquery noob so this is more for my own learning – why not this?

//make sure #agency is defaulted to display:none, or add a line to check this
$("#landing li.nav4 a").live('click', function() {
  $('#agency').load('assets/ajax/agency.html', function() {
    $("#agency-main nav li.nav1 a").addClass("nav1-on"); 
  });
  $("#landing").fadeOut('slow', function(){
    $('#agency').fadeIn();
   });
  return false;
});