jQuery Animate Effect not doing what its supposed to...

Question

The JS:

var dialog = jQuery('#dialog');
dialog.animate({
  'top':'-4px',
  'display':'toggle'
}, 300);

The CSS:

#dialog {
  display: none;
  position: relative;
  width: 180px;
  height: auto;
  margin-left: -20px;
  top: -15px;
}

The Problem:

The animate executes and the div appears into view but after the animate is done executing it hides the div again but it remains in its new animated position. I know this because it appends the inline style="top:-4px" but the display inline style is gone after the animation executes.

The other problem is that this is a dialog window that has a cancel button so even if I add a callback of dialog.show(); after the animate completes. The cancel button does not work.

Cancel button animate:

dialog.animate({
    'top':'-15px',
    'display':'toggle'
}, 300);

This does nothing when the user clicks the cancel button. If i remove the callback from the first animate then the dialog window disappears and the user can't click cancel.

Am I missing something obvious here? I've used animate before and have never run into this problem.

Answer 1

never seen display:toggle in css ... are you sure about it ?

Answer 2

Instead of 'display':'toggle' use 'show':'toggle'

This should fix both issues.