jQuery Dialog Fly-in

Question

我正试图从屏幕的一侧进入一个对话框，比方说顶部。我能够用一些肮脏的黑客做到这一点，但是，它的表现非常不起眼。这是我的代码：

$(':button').click(function() {
  $('<div class="myDialog" title="Test"></div>').dialog({
    'position' : 'top'
  }).dialog('widget').css({
    'position' : 'fixed',
    'top' : '0',
    'height' : '0'
  }).animate({
    'height' : '200'
  }, 1000, function() {
    $(this).animate({
      'top' : '40%'
    }, 1000);
  });
});

jQuery UI中没有任何影响我按照希望的方式处理这个问题。有没有办法可以提高它的性能，所以它很顺利？如果可能的话，我想避免使用插件。

感谢您的时间。

编辑：好的，这是我在嗅觉嗅觉的帮助下偶然想出的：

$(':button').click(function() {
  $('<div class="myDialog" title="Test"></div>').dialog({
    'position' : 'top'
  }).dialog('widget').css({
    'position' : 'fixed',
    'top' : $(document).height()+200, //Here was the crown-jewel
    'display' : 'none'
  }).slideDown('slow', function() { //Thanks to smellofgreen
    $(this).animate({
      'top' : '40%'
    });
  });
});

Answer 1

我做了类似的事情，只使用了使用slideUp（）/ slideDown（）方法的缓动插件：

$('body').append('<div id="terminal-status"></div>');
$('#terminal-status').slideUp(0).load( /* load your content */ ), function () {
    $('#terminal-status').slideDown(900,'easeOutCirc');
}

未显示的是根据您的意愿定位它的CSS。