Jquery双重效果

时间:2015-03-09 06:02:51

标签: jquery dialog jquery-dialog jquery-effects

HeJ小鼠,

我在将双重效果应用于对话框效果方面遇到了困难。我知道这个问题已被复制,但我无法弄清楚我在这里做错了什么。

下面是我的常规代码,在“打开”对话框中有效幻灯片,并在关闭对话框中显示“粉扑”效果。这两个代码都运行正常。

打开dialogBox

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

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

关闭对话框

var option = {}; 

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

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

我希望在打开对话框中的幻灯片之前应用淡入淡出效果(按照幻灯片效果),然后将关闭效果从“粉扑”更改为fadeOut。我使用以下代码,

打开对话框

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

关闭对话框

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

队列有问题,因为它会在第二次尝试打开/关闭时应用效果。

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。

我的要求是淡入弹出窗口,然后应用幻灯片效果。 幸运的是,JQuery对话框默认使用淡入/淡出效果。我只能使用show& amp;隐藏选项。然后在对话框打开后调用效果。

以下是调用对话框的代码。我正在“class3”类的点击事件上加载对话框

$( "#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 );

    });