Jquery .show not animating properly and not grabbing all links in target
Essentially I'm trying to lo开发者_运维百科ad content into a div, from a link inside that div. Now it works to a degree. My code so far grabs links from the target div and on click animates the 'content' div out and replaces with the 'content' div at the target link.
//Target links and call on click
$('#scrollbox li a').click(function(){
//Define load paramaters
var toLoad = $(this).attr('href')+' #content';
//Hide content
$('#content').hide('fast',loadContent);
//Remove Load Bar
$('#load').remove();
//Show Load Bar
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
function loadContent() {
$('#content').empty().load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('slow',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
First issue is that after hiding old content, on the showing of the new content , the animation is choppy, and the OLD content is still visible and animates in until at the last milisecond the new content just "flashes" in. Shouldn't the old content hide and the new content show? I tried to fix this with .empty but now it just flicks in as though there were no .show animation at all.
Second issue is that the only links that any of my code seem to have an effect on are the header links in the target div, the links inside the 'content' div (inside the target div) are unaffected and reload the whole page. Do I need to target the div's within the div's? Am I not targeting ALL links within the div in my code?
If you need further clarification on anything please let me know.
Cheers and thanks for the help.
Fixed. Set animations to 0
so as there were none at all. (So sort of a cheap fix)
Used .live()
command to bind command to all subsequent links on reload.
$(document).ready(function(){
$('.scroll-pane').jScrollPane({showArrows: true});
$('#scrollbox a').live('click', function() {
//all elements that exist now and elements added later
//with this class have this click event attached
//Define load paramaters
var toLoad = $(this).attr('href')+' #content';
//Hide content
$('#content').hide(0,loadContent);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').fadeIn(0);
}
return false;
});
});
精彩评论