javascript - 对话框中的多重效果显示/隐藏

Question

使用对话框可以同时使用多个效果吗？例如，在 show、bounce 和 highlight 中。

我尝试了 {effect: 'bounce', duration: 550, effect: 'highlight', duration: 550}, 但只有最后一个效果运行。

$('.modal').click(function () {
    $(".dialog-modal").dialog({
        modal: true,
        hide: "fadeOut",
        show: {effect: 'bounce', duration: 550, effect: 'highlight', duration: 550},
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
});

Answer 1

我刚刚花在这上面的时间是 0 有意义的。而我仍然没有得到我想要的结果。

但这至少应该对您有所帮助。 Check da fiddle

jQueryUI:

$(document).ready(function () {
    var $dlg = $('.dialog-modal');
    var $mdl = $('.modal');
    $dlg.dialog({
        autoOpen: false,
        modal: true,
        dialogClass: 'sweetums',
        hide: "fadeOut",
        show: {
            effect: 'bounce',
            duration: 550
        },
        buttons: {
            Ok: function () {
                $dlg.dialog("close");
            }
        }
    });
    var $newDialog = $('.sweetums');
    $mdl.click(function () {
        $dlg.dialog('open');
        $newDialog.effect("highlight", 550);
    });
});

HTML:

<button class="modal">Click</button>
<div class="dialog-modal">some stuff</div>

如果您想知道为什么我为 $newDialog 创建了第二个对象，那是因为旧对象最初是一个 div 和文本，但是当创建模态时，它会扩展并添加按钮。 $dlg 只会对文本本身产生影响，而不会对整个框产生影响，因此包装整个东西是必要的。