Question

Complete beginner so I’m probably missing something obvious but…
I can’t seem to combine an animate(width) effect with a this.hide effect, I can make either one work by commenting out the other. Here’s the code:

function showSlidingDiv(column){
var maxWidth = 200;
var smallWidth = 80;
var myWidth = $(column).width();


$("div").each(function(){
        $(this).animate({width: smallWidth});
        $(this).hide();
     });

$(column).show();
$(column).animate({width: maxWidth});
}

I’m using this on a large table of information so that the user can click on a th heading and expand that column of information while reducing all the others. Each td has a div inside it that is being expanded or contracted. I would like to also hide, if possible by animation, the divs in the other columns at the same time. Like I said, this will work for one or the other, but not both together.

Any help appreciated.
Thanks.

Answer 1

.hide() isn’t a queued function, you either need to call it in a .animate() callback, like this:

$("div").animate({width: smallWidth}, function() {
  $(this).hide();
});

Or make it a queued function with this trick:

$("div").animate({width: smallWidth}).hide(0);

There’s no need for the .each() in either case, since the above code will apply to all matches as well.