jQuery Dialog Fly-in - PullRequest
Новая
       291

jQuery Dialog Fly-in

0 голосов
/ 27 мая 2011

Я пытаюсь открыть диалоговое окно сбоку моего экрана, скажем, сверху.Я смог сделать это с помощью некоторых грязных хаков, но его производительность довольно не впечатляет.Вот мой код: 

$(':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 не было никаких эффектов, которые обрабатывали бы это так, как я надеялся.Есть ли способ, которым я могу улучшить его производительность, чтобы это было гладко?Я бы по возможности не использовал плагин.

Спасибо за ваше время.

РЕДАКТИРОВАТЬ: Хорошо, вот что я случайно придумалс помощью запаха зеленого цвета: 

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

1 Ответ

1 голос
/ 27 мая 2011

Я сделал что-то похожее, используя только плагин замедления с использованием методов slideUp () / slideDown (): 

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

Не показан CSS, который позиционирует его так, как вы хотите.

...