Hide problem

Hide problem

I'm having a problem with the hide function in jquery. My markup code is very straight forward and looks like this...

  2. <div id="taskEditorContainer" class="hide">
  3.       Some content
  4. </div>
  5. <button id="taskEditorTool" class="button" type="button">Skapa ärende</button>

The hide css class is simply to ensure that the div is hidden when the page loads...

  2. div.hide
  3. {
  4. display:none;
  5. }

The jquery code looks like this...

  2. $(function() {
  3. $('button#taskEditorTool').live('click', function() {
  4. if ($('#taskEditorContainer').is(':visible')) {
  5. $('div#taskEditorContainer').hide(400);
  6. } else {
  7. $('div#taskEditorContainer').show(400);
  8. }
  9. });
  10. });

Showing the div works fine, hiding the div on the other hand doesn't. For some reason if I do it like this...

  1. $('div#taskEditorContainer').hide();

... it works just fine, but is rather ugly. On the other hand this...

  1. $('div#taskEditorContainer').hide(400);

... won't work at all. I've tried using 'fast' and 'slow' as well, when ever I specify a speed indicator to the hide function it won't work. Anyone else experienced this?