Javascript Jquery对话框滑动

我已经通过jQueryUI将一个div设置为一个对话框。它现在是空的，但我想做的是让它从窗口外从左到中滑动。取而代之的是，它像打开抽屉一样滑动。我想我很接近，但不知道怎么做

JS

HTML

---

以下是一个简单的解决方案：

当对话框打开时，此代码将把它移到屏幕外，然后将对话框动画设置回原位

---

如果要在关闭时将对话框向右滑动，事情会变得有点复杂：

---

在这里，我们必须取消原始对话框关闭，然后触发动画，然后允许对话框正常关闭。我们还必须将文档的

overflow-x

设置为

hidden

，这样水平滚动条就不会出现。

这里有一个简单的解决方案：

当对话框打开时，此代码将把它移到屏幕外，然后将对话框动画设置回原位

---

如果要在关闭时将对话框向右滑动，事情会变得有点复杂：

---

在这里，我们必须取消原始对话框关闭，然后触发动画，然后允许对话框正常关闭。我们还必须将文档的

overflow-x

设置为

hidden

，这样水平滚动条就不会出现。

我认为它不能与dialog自己的

show

/

hide

选项一起使用，您可能需要从头开始制作动画，因为对话框动画从对话框的div位置开始。您想让它从左到中淡入吗？不是真的。只需100%不透明度的幻灯片。我认为它不适用于dialog自己的

显示

/

隐藏

选项，您可能需要从头开始制作动画，因为dialog动画从dialog的div位置开始。您希望它从左到中淡入吗？不是真的。只需以100%不透明度滑动即可。

var speed = 2000;
$(document).ready(function () {
    $('#loginmenu').dialog({
        show: {
            effect: 'slide',
            direction: 'left',
            speed: speed

        },
        hide: {
            effect: 'slide',
            direction: 'left',
            speed: speed

        },
        modal: true
    });
});

<div id="loginmenu"></div>

#loginmenu {
}

var speed = 2000;
$(document).ready(function () {
    $('#loginmenu')
        .on("dialogopen", function() {
            var widget = $(this).dialog("widget");
            var offset = widget.offset();
            widget
                .css("left", -widget.outerWidth() + "px")
                .animate({ left: offset.left }, { duration: speed });
        })
        .dialog({
            modal: true
        });
});

var speed = 2000;
$(document).ready(function () {
    $('#loginmenu')
        .on("dialogopen", function() {
            var widget = $(this).dialog("widget");
            var offset = widget.offset();
            widget
                .css("left", -widget.outerWidth() + "px")
                .animate({ left: offset.left }, { duration: speed });
        })
        .on("dialogbeforeclose", function() {
            var dialog = $(this);
            var widget = dialog.dialog("widget");

            if (widget.data("dialog-closing") || widget.is(":animated")) {
                widget.data("dialog-closing", false);
                return true;
            }

            widget.data("dialog-closing", true);
            var origOverflow = $("html").css("overflow-x");
            $("html").css("overflow-x", "hidden");
            widget.animate({ left: $(window).width() }, {
                duration: speed,
                complete: function() {
                    dialog.dialog("close");
                    $("html").css("overflow-x", origOverflow);
                }
            })

            return false;
        })
        .dialog({
            modal: true
        });
});