jQuery: slideDown jumpy after slideUp — height problem?
This is a common problem, outlined here and here, however I can't find a solution to it.
I have a container (#a) that I load external files into. First the current content is hidden with a slideUp function, then the new content is loaded and finally the container appears with a slideDown. However the animation is jumpy because when it slideDown it calculates the height of the previous content. How can I make it calculate the height of the new content instead?
You can see the problem in action here (click one of the three first开发者_如何学运维 links in the left column) and here is the jQuery:
$('.kolonne a').click(function() {
var url = $(this).attr('rel');
$('#a').slideUp(function() {
$(this).load(url);
});
$('#a').slideDown();
});
my guess is that you need to make the slideDown only after the content is loaded, try a callback like this:
$('.kolonne a').click(function() {
var url = $(this).attr('rel');
$('#a').slideUp(function() {
$(this).load(url, function() {
//done
$('#a').slideDown();
});
});
});
精彩评论