JQuery двойной эффект

Question

Hej,

Я сталкиваюсь с трудностями при применении двойного эффекта к моим эффектам диалога. Я знаю, что этот вопрос повторяется, но я не могу понять, что я делаю неправильно здесь.

ниже - это мой обычный код со слайдом в диалоговом окне «Открыть» и эффект «затяжки» в диалоговом окне закрытия. Оба кода работают нормально.

Открыть DialogBox

$("#dialogWindow").dialog("open"); 

$("#dialogWindow").effect("slide", {direction: 'up', distance:300} , 330); 

Закрытие DialogBox

var option = {}; 

$("#dialogWindow"). effect("puff", options, 400); 

setTimeout(function() { $("#dialogWindow").dialog('close'); }, 300) 

Я хочу, чтобы применить эффект FadeIn (следовать по эффекту скольжения) перед горкой в ​​диалоге открытия, и изменить эффект закрытия от «пыхтеть» fadeOut. Я использую следующий код,

Открыть диалоговое окно

$("#dialogWindow").dialog("open").fadeIn(3000).effect("slide", {direction: 'up', distance:300} , 330).dequeue(); 

Закрытие диалогового окна

$("#dialogWindow").dialog('close').fadeOut(3000).dequeue(); 

Существует что-то не так с очереди, так как он применяет эффект на 2-й попытки открыть/Закрыть.

Answer 1

Я решил проблему.

Мое требование должно исчезнуть во всплывающем окне, а затем применить эффект слайда. К счастью, в диалоговом окне JQuery по умолчанию используется эффект In/Fade Out. Все, что мне пришлось использовать, это показать & скрыть опции. Затем вызовите эффект после открытия диалога.

Ниже приведен код для вызова диалога. Я загружаю диалог по событию щелчка класса «product3»

$("#product3").dialog({ 

    autoOpen: false, 

    resizable: false,    

    modal: true, 


    show: { 
      effect: 'fade', 
      duration: 900 
     }, 

    hide: { 
      effect: 'fade', 
      duration: 900 
     }, 

}); 



    $(".product3").click(function(){ 

     $("#product3").dialog("open"); 

     $("#product3").dialog("option", "width", 1215); 

     $("#product3").dialog("option", "height", 530); 

    $("#product3").effect("slide", {direction: 'up', distance:300} , 330); 

    });