Use the completion callback that the hide() and show() functions provide:
function toggleShow(id) {
$('.tbl').hide( 'slow', function() {
$('#' + id).show('slow');
});
}
Also, are you sure you want to use hide('slow') and show('slow'). When I see
those effects on a page I usually find it annoying. It's just too busy,
having both the height and width animate at once - especially when it
triggers different word-wrapping as it animates.
In most cases I recommend using slideUp and slideDown instead. They work the
same way:
function toggleShow(id) {
$('.tbl').slideUp( 'slow', function() {
$('#' + id).slideDown('slow');
});
}
-Mike
> function toggleShow(id) {
> $('.tbl').hide('slow');
> $('#' + id).show('slow');
> }
>
> The problem I am having is that I want to queue the hide and
> show so it doesn't start to show during the hiding as it does
> now, it doesn't show that much on firefox or safari but in ie
> the hiding table jumps below the other one and the hiding and
> showing is done at the same time.
