jQuery Animate Effect没有做到它应该做的事情

Question

JS：

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

CSS：

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

问题：

动画执行并且div出现在视图中但是在动画完成后执行它再次隐藏div但它仍然保持在新的动画位置。我知道这是因为它附加了内联样式=“top：-4px”但是动画执行后显示内联样式消失了。

另一个问题是这是一个带有取消按钮的对话窗口，所以即使我添加了dialog.show（）的回调。在animate完成之后。取消按钮不起作用。

取消按钮动画：

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

当用户单击取消按钮时，这不起作用。如果我从第一个动画中删除回调，则对话框窗口消失，用户无法单击取消。

我错过了一些明显的东西吗？我之前使用过animate，但从未遇到过这个问题。

Answer 1

而不是'display':'toggle'使用'show':'toggle'

这应解决这两个问题。