jQuery Dynamic content loading issue…

[kgscott284]

Here is the rundown: Loading content dynamically with no problem, animations execute as needed, however, once the content from the dynamic pages is cached, the content is loading BEFORE the animation completes…In this case, when you click a navigation item, the content area slides up if open, then slides down to reveal the new content, if you have one open already and you click another you can see it load the content before executing the slideUp animation…any clues on how i can solve this?

I’m sure this is a standard issue and i am assuming i am just loading at the wrong time…here is the code:

var newHash = '',

$mainContent = $('.content');

$mainContent.hide();

$('nav').delegate('a', 'click', function() {

window.location.hash = $(this).attr('href');

return false;

});

$(window).bind('hashchange', function() {

newHash = window.location.hash.substr(1);

$mainContent.slideUp(300).delay(400).load(newHash, function() {

$mainContent.slideDown(700, 'easeInOutExpo');

});

});​

[Mottie]

It would help to see a demo of this, but I think the problem is the delay is only working for animation and “load” is not included. So, I think the easiest solution would be to load the new content into a hidden div, then move it into the $mainContent in the load callback function; like this:

var newHash = '',

$cache = $('
').hide().appendTo('body'),

$mainContent = $('.content').hide();

$('nav').delegate('a', 'click', function() {

window.location.hash = $(this).attr('href');

return false;

});

$(window).bind('hashchange', function() {

newHash = window.location.hash.substr(1);

$mainContent.slideUp(300);

$cache.load(newHash, function() {

$mainContent.html( $(this).html() ).slideDown(700, 'easeInOutExpo');

});

});​

[Author]

Posts