Can I hide/show this menu with CSS3 and or javascript without a timeout

Question

http://jsfiddle.net/blankasaurus/YPR4U/15/embedded/result/

I have the layout functioning how I want it to function. I'm not sure I like having to set the width in the toggle function:

 $('.content').css('width', '100%');

 $('.content').css('width', '75%');

and I also REALLY don't like having to set a timeout before showing and hiding the menu panel:

 setTimeout(function()
 {
     $('.sidebar').fadeIn();
 }, 1001);

Is there a better way to go about this?

Here's a fiddle:

Answer 1

For the fading out, you can just use a callback function passed into fadeOut.

For example:

$('.sidebar').fadeOut( 400, function() {
    $('.content').css('width', '100%');
});

For the fading in, you could try using transition events. You'll just have to write specific code for different browsers, and not surprisingly, older browsers are not supported. More details can be found here.