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.