jQuery对话框即时输入

问题描述

| 我正在尝试从屏幕的侧面弹出对话框，比方说顶部。我能够通过一些肮脏的技巧来做到这一点，但是它的表现并不令人印象深刻。这是我的代码：

$(\':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中没有任何效果可以按照我希望的方式进行处理。有没有一种方法可以改善其性能，从而使其顺畅？如果可能的话，我想避免使用插件。 感谢您的时间。 编辑：好的，这是我在smoveofgreen的帮助下不小心想到的：

$(\':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%\'
    });
  });
});

    

解决方法

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

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

没有显示可根据需要放置它的CSS。